页面布局（CSS如何使用flex属性（）） _Flexbox

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 >

输出如下：