©2020-2024 ioDraw All rights reserved,
Privacy Policy
一、flex布局与传统布局
传统布局：兼容性好、布局繁琐且不能较好地在移动端布局
flex布局：布局简单方便，很适合在移动端布局，但存在版本兼容支持问题
二、flex布局原理
flex 是 flexible Box 的缩写，意为 “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
采用 flex 布局的元素，称为 flex 容器（flex container），它的所有子元素自动成为容器成员，称为 flex 项目（flex item）
。 flex就是通过给父盒子添加flex属性，来控制子盒子的位置和排列等。
PS：将父盒子设为 flex 布局以后，子元素的 float（浮动）、clear（清除浮动）和 vertical-align（垂直居中）属性将失效。
三、flex布局常见父元素属性
3.1 flex-direction
作用：设置主轴方向，默认为水平从左到右
属性值：row（从左到右，默认）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）
<style> #box2, #box3 { height: 300px; width: 300px; } #box1 { height: 100vh;
width: 100vw; background-color: skyblue; display: flex; /* 1.flex-direction:
row; */ /* 2.flex-direction: row-reverse; */ /* 3.flex-direction: column; */
flex-direction: column-reverse; } #box2 { background-color: red; } #box3{
background-color: green; } </style> <body> <div id="box1"> <div
id="box2">111</div> <div id="box3">222</div> </div> </body>
1.row
2.row-reverse
3.column
4.column-reverse
3.2 justify-content
作用：设置主轴上子元素的排列方式（默认从头部方向）
属性值：
flex-start（从头部开始，默认）、flex-end（从尾部开始排列）、center（主轴居中对齐）、space-around（平分剩余空间）、space-between（先两边贴边再平分剩余空间）
<style> .item { height: 300px; width: 300px; } #box1 { height: 100vh; width:
100vw; background-color: skyblue; display: flex; justify-content: /*
flex-start（从头部开始，默认） flex-end（从尾部开始排列） center（主轴居中对齐） space-around（平分剩余空间）
space-between（先两边贴边再平分剩余空间）*/ } #box2 { background-color: red; } #box3{
background-color: green; } #box4{ background-color: yellow; } </style> <body>
<div id="box1"> <div id="box2" class="item">111</div> <div id="box3"
class="item">222</div> <div id="box4" class="item">333</div> </div> </body>
1.flex-start
2.flex-end
3.center
4.space-around
5.space-between
3.3 flex-wrap
作用：设置子元素是否换行（默认不换行）
属性值：nowrap（不换行，默认）、wrap（换行）
PS：不换行时， 如果装不开，会缩小子元素的宽度，放到父元素里面
<style> .item { height: 400px; width: 400px; } #box1 { height: 100vh; width:
100vw; background-color: skyblue; display: flex; flex-wrap: /*nowrap wrap*/ }
#box2 { background-color: red; } #box3{ background-color: green; } #box4{
background-color: yellow; } #box5{ background-color: white; } #box6{
background-color: blue; } #box7{ background-color: gray; } </style> <body> <div
id="box1"> <div id="box2" class="item">111</div> <div id="box3"
class="item">222</div> <div id="box4" class="item">333</div> <div id="box5"
class="item">444</div> <div id="box6" class="item">555</div> <div id="box7"
class="item">666</div> </div> </body>
1.nowrap
2.wrap
3.4 align-items
作用：设置侧轴上的子元素排列方式，需要子项为单行（默认为拉伸，需要子盒子未指定高度）
属性值：flex-start（从上到下）、flex-end（从下到上）、center（挤在一起居中）、stretch（拉伸，默认）
PS：侧轴为主轴的垂直方向，主轴为水平时方向为从上到下，主轴为垂直时方向为从左到右
<style> .item { height: 400px; width: 400px; } #box1 { height: 100vh; width:
100vw; background-color: skyblue; display: flex; align-items: /*flex-start
flex-end center stretch*/ } #box2 { background-color: red; } #box3{
background-color: green; } #box4{ background-color: yellow; } #box5{
background-color: white; } #box6{ background-color: blue; } #box7{
background-color: gray; } </style>
1.flex-start
2.flex-end
3.center
4.stretch
3.5 align-content
作用：设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（默认拉伸）
属性值：
flex-start（侧轴头部开始）、flex-end（侧轴尾部开始）、center（侧轴中间显示）、space-around（平分侧轴剩余空间）、space-bwtween（先占据两边再平分）、stretch（拉伸，默认）
<style> .item { height: 400px; width: 400px; } #box1 { height: 100vh; width:
100vw; background-color: skyblue; display: flex; flex-wrap: wrap;
align-content: /* flex-start flex-end center space-around space-between stretch
*/ } #box2 { background-color: red; } #box3{ background-color: green; } #box4{
background-color: yellow; } #box5{ background-color: white; } #box6{
background-color: blue; } #box7{ background-color: gray; } </style>
1.flex-start
2.flex-end
3.center
4.space-around
5.space-between
6.stertch
3.6 flex-flow
作用：flex-direction和flex-warp的复合属性
属性值：flex-direction和flex-warp属性的组合，第一个为flex-direction属性，第二个为flex-warp属性，可部分省略（如：flex-flow:column）
四、flex布局子元素常见属性
4.1 flex-grow
作用：定义子项目分配剩余空间，需要主轴存在剩余空间（默认为0）
属性值：0（默认，保持初始），正数n（放大因子，占据剩余空间份数）
PS：设置后的宽度（或高度）为原先设置值加上分配得到的
如下例，设置grow的三个元素分配得到的分别为（320-100）=220，（540-100）=440，（760-100）=660
<style> .item { height: 100px; width: 100px; } #box1 { height: 100vh; width:
100vw; background-color: skyblue; display: flex; } #box2 { background-color:
red; flex-grow: 1; } #box3{ background-color: green; flex-grow: 2; } #box4{
background-color: yellow; flex-grow: 3; } #box5{ background-color: white; }
#box6{ background-color: blue; } #box7{ background-color: gray; } </style>
4.2 flex-shrink
作用：超出范围时缩小（默认为1，可缩小）
属性值：0（不可收缩，维持初始大小）、1（可缩小，默认），正数n（收缩因子，被收缩的份数）
例：超出400，两个子元素分别设置shrink为1和3，则前者缩小100，后者缩小300
<style> .item { height: 400px; width: 400px; } #box1 { height: 100vh; width:
100vw; background-color: skyblue; display: flex; } #box2 { background-color:
red; flex-shrink: 1; } #box3{ background-color: green; flex-shrink: 2; } #box4{
background-color: yellow; flex-shrink: 3; } #box5{ background-color: white; }
#box6{ background-color: blue; } #box7{ background-color: gray; } </style>
4.3 flex-basis
作用：定义在分配多余空间之前，项目占据的主轴空间（默认为auto，即项目本来大小），浏览器根据这个属性，计算主轴是否有多余空间。
属性值：auto（默认）、xxxpx（项目占据xxxpx）
<style> .item { height: 400px; width: 400px; } #box1 { height: 100vh; width:
100vw; background-color: skyblue; display: flex; } #box2 { background-color:
red; flex-basis: 800px; } #box3{ background-color: green; } #box4{
background-color: yellow; } #box5{ background-color: white; } #box6{
background-color: blue; } #box7{ background-color: gray; } </style>
4.4 align-self
作用：使此项目有与其他项目不一样的对齐方式，可覆盖align-items属性（默认为auto，表示基继承align-items属性
属性值：align-items的属性
<style> .item { height: 400px; width: 400px; } #box1 { height: 100vh; width:
100vw; background-color: skyblue; display: flex; align-items: flex-end; } #box2
{ background-color: red; align-self: center; } #box3{ background-color: green;
} #box4{ background-color: yellow; align-self: flex-start; } #box5{
background-color: white; } #box6{ background-color: blue; } #box7{
background-color: gray; } </style>
5.5 order
作用：定义项目的排列顺序（默认为0）
属性值：number（数值越小越靠前，与z-index不一样）
<style> .item { height: 400px; width: 400px; } #box1 { height: 100vh; width:
100vw; background-color: skyblue; display: flex; } #box2 { background-color:
red; order: 1; } #box3{ background-color: green; } #box4{ background-color:
yellow; } #box5{ background-color: white; order: -1; } #box6{ background-color:
blue; order: -2; } #box7{ background-color: gray; } </style>
5.6 flex
作用：flex-grow、flex-shrink、flex-basis三者的复合属性
属性值：三者属性值的组合，可部分省略