页面布局：CSS如何使用flex属性？

2021年3月22日15:17:14 发表评论 650 次浏览

CSS中的flex属性是flex-grow, flex-shrink和flex-basis属性的组合。用于设置弹性物料的长度。 flex属性具有很高的响应速度和移动友好性。放置子元素和主容器很容易。边距不会随着内容边距而收缩。无需编辑HTML部分即可轻松更改任何元素的顺序。

语法如下：

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值：

flex-grow：一个数字, 用于指定相对于其余灵活项目, 将增加多少项目。

flex-shrink：一个数字, 指定相对于其余弹性项目收缩多少项目。

flex-basis：它设置项目的长度。弹性基础的合法值为：自动, 继承或数字, 后跟％, em, px或任何其他长度单位。

例子：

<!DOCTYPE html>
< html >
     < head >
         < title >
             CSS flex Property
         </ title >
          
         < style > 
             #Geeks {
                 width: 300px;
                 height: 200px;
                 border: 1px solid black;
                 display: flex;
             }
             #Geeks div{
                 flex: 1;
             }
             .GFG1 {
                 background-color: green;
             }
             .GFG2 {
                 background-color: lightgreen;
             }
             .GFG3 {
                 background-color: darkgreen;
             }
         </ style >
     </ head >
      
     < body >
         < h2 >CSS flex Property</ h2 >
          
         < div id = "Geeks" >
             < div class = "GFG1" >
                 lsbin
             </ div >
             < div class = "GFG2" >
                 Lite Content
             </ div > 
             < div class = "GFG3" >
                 Special Content
             </ div >
         </ div >
     </ body >
</ html >

输出如下：

范例2：

<!DOCTYPE html>
< html >
     < head >
         < title >
             CSS flex Property
         </ title >
          
         < style > 
             #Geeks {
                 width: 300px;
                 height: 200px;
                 border: 1px solid black;
                 display: flex;
             }
             #Geeks div{
                 flex: 1 0 auto;
             }
             .GFG1 {
                 background-color: green;
             }
             .GFG2 {
                 background-color: lightgreen;
             }
             .GFG3 {
                 background-color: darkgreen;
             }
         </ style >
     </ head >
      
     < body >
         < h2 >CSS flex Property</ h2 >
          
         < div id = "Geeks" >
             < div class = "GFG1" >
                 lsbin
             </ div >
             < div class = "GFG2" >
                 Lite Content
             </ div > 
             < div class = "GFG3" >
                 Special Content
             </ div >
         </ div >
     </ body >
</ html >

输出如下：