flex布局是CSS弹性布局中的一种，使用非常的方便，也是一种非常火的布局方式

解决了很多排版布局难题

目录

一.开启flex布局模式

二.flex布局主轴操作-父元素

1.决定主轴方向

2.决定主轴上元素排列方式

 3.是否可以换行

二.flex布局侧轴操作-父元素

1.侧轴上单行子元素排列方式

1.侧轴上多行子元素排列方式

二.flex布局侧轴操作-子元素

1.order属性

2.子元素侧轴排列方式

---

一.开启flex布局模式

我们可以先给需要进行布局的父元素添加：

display:flex;

然后给子元素添加：

flex:1;
/*可以填写任意数字，表示该子元素在父元素中所占的份数
定义子元素分配剩余空间*/

这样就可以开始我们的flex布局了

---

二.flex布局主轴操作-父元素

1.决定主轴方向

决定主轴的元素排列方向，父元素中的所有子元素跟着主轴排列，那么我们就知道：

flex-direction属性是写在父元素身上的

flex-direction:row;

row:（默认值）如果我们不写flex-direction属性的话，默认为row值【从左到右】

row-reverse：【从右到左】

column：【从上到下】

column-reverse：【从下到上】

2.决定主轴上元素排列方式

上面我们说了主轴的方向，这里我们阐述一下在主轴上其子元素的排列方式

justify-content:flex-start;

flex-start：（默认值）从头部开始

flex-end：从尾部开始

center：在主轴上居中对齐（如果Y为主轴，那么就垂直居中）

space-around：平分剩余空间

space-between：先俩边贴边，再平分剩余空间

space-evenly：所有地方的间距都相同

 3.是否可以换行

如果子元素很多并且子元素已经自定义了固定的大小，那么不换行的话，flex布局会自动的将子元素的大小改变

flex-wrap:nowrap;

nowrap:（默认值）不换行

wrap：换行

综合写法：

flex-flow:row wrap;

 这是flex-direction主轴方向与flex-wrap是否自动换行的复合属性

---

二.flex布局侧轴操作-父元素

当主轴的排列方式确定好之后，我们来进行侧轴的排列方式：

什么是侧轴？

举个例子，X轴为主轴的话，那么Y轴就是侧轴

1.侧轴上单行子元素排列方式

如果侧轴上只有一行子元素的话，我们可以：

align-items:stretch;

stretch：（默认值）子元素拉伸，意思就是子元素继承父元素的高度，父元素多高，子元素就多高，说继承也有点不恰当，所以我们说子元素拉伸到了与父元素同高（不要给高度）

center：垂直居中，所有的子元素会挤在一起

flex-start：从上到下

flex-end：从下到上

1.侧轴上多行子元素排列方式

align-content:flex-start;

flex-start：（默认值）在侧轴头部开始排列

flex-end：在侧轴尾部开始排列

center：在侧轴中间显示

space-around：子项在侧轴平分剩余空间

space-between：子项在侧轴先分布俩边，再平分剩余空间

stretch：子项元素高度平分父元素高度

---

二.flex布局侧轴操作-子元素

1.order属性

我们的子元素有order这样一个属性，和z-index相似，但是又相反

来定义子元素排列顺序，数值越小，主轴上排名越靠前

而z-index是数值越大，Z轴上排名越靠前

order:5;

2.子元素侧轴排列方式

align-self:auto;

子元素align-self属性允许单个子元素与其他子元素不同的对齐方式，也就是说，这个属性给到某一个子元素，这个子元素相对来说就是自由的（因为该属性可以覆盖掉父元素的align-items属性）

auto：（默认值）表示继承父元素align-items【如果没有父元素的话，等同于stretch拉伸】

stretch：（默认值）子元素拉伸，意思就是子元素继承父元素的高度，父元素多高，子元素就多高，说继承也有点不恰当，所以我们说子元素拉伸到了与父元素同高（不要给高度）

center：垂直居中，所有的子元素会挤在一起

flex-start：从上到下

flex-end：从下到上

我们现在可以满足日常的99%的flex布局使用了，如果想要了解更多：

Flex 布局语法教程 | 菜鸟教程网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为未来布..https://www.runoob/w3cnote/flex-grammar.html