聊一聊我知道的flex布局

flex 布局的基本概念

MDN上是这样定义flex布局的：Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。

我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

现代浏览器几乎都支持flex布局，目前前端使用最多的应该也是flex和grid两种布局方式了，下面会记录一下我常用的一些布局属性和技巧。

使用flex布局时，浮动布局会失效。想要某个元素靠右可以使用margin-left:auto;

flex主轴main-axis和交叉轴cross-axis

• 开启flex布局: display:flex | inline-flex,在如div此类元素使用flex，span这类元素使用inline-flex

.flex-box{
    display: flex;
    border: 1px solid #999;
    width: 300px;
    height: 200px;
    margin: auto;
}
.flex-box > div{
    border:1px solid #999;
    width: 50px;
    height: 50px;
    background-color: bisque;
}
<div class="flex-box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

在开启flex布局前，div是块级元素，会独占一行

开启之后

开启flex布局后，我们所有操作除了控制容器其他全部都是作用于main-axis和cross-axis两根轴上。

操作父容器

flex-direction

控制主轴和交叉轴方向

• row (默认值)
• column
• row-reverse
• column-reverse

在 flex 容器中添加 flex-direction 属性可以让我们更改 flex 元素的排列方向。设置 flex-direction: row-reverse 可以让元素沿着行的方向显示，但是起始线和终止线位置会交换。

把 flex 容器的属性 flex-direction 改为 column ，主轴和交叉轴交换，元素沿着列的方向排列显示。改为 column-reverse ，起始线和终止线交换。

justify-content

控制主轴上子元素排列

• flex-start(默认值)
• flex-end
• center
• space-between
• space-around
• space-evenly

flex-start默认为左对齐，flex-end右对齐，center居中对齐，space-between两端对齐，子元素之间的间距是与边框的两倍，space-around与space-between相反，space-evenly子元素之间的间距都相等，平分所有剩余空间。

align-iterms

控制交叉轴子元素排列

• stretch(默认值)
• flex-start
• flex-end
• center
• baseline

stretch如果项目未设置高度或设为auto，将占满整个容器的高度。flex-start交叉轴起点对齐，flex-end交叉轴终点对齐，center交叉轴居中对齐。baseline基线对齐

flex-wrap

控制子元素是否可换行

• nowrap(默认值)
• wrap
• wrap-reverse

nowrap默认不换行，所有子元素都排列在一行。wrap开启换行，当容器一行放不下所有子元素时，自动排列到下一行。wrap-reverse开启换行，但第一行会排列到最下方。

align-content

• stretch(默认值)
• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

align-content 定义了多根轴线的对齐方式。一根轴线不生效。必须是设置了flex-wrap为非nowrap且出现了换行才生效。align-content是综合了justify-content和align-iterms设置两根轴线的对齐方式。

操作子元素（项目item）

order

项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow

项目的放大比例，默认为0，0表示不缩放

flex-shrink

项目的缩小比例，默认为1，0表示不缩放

flex-basis

在分配多余空间之前，项目占据的主轴空间。

align-self

单个项目覆盖父容器的align-items属性。效果和align-items相同，只是作用与单个子元素上。

总结

flex我常用的属性基本就这些，当然还有很多其他的可以探索。如：flex-grow flex-shrink flex-basis可以简写为flex: flex-grow flex-shrink flex-basis;但是为了好读建议还是分开写，flex布局有时候我们也需要再加入position定位才能达到完美布局。flex布局如果实现比较麻烦的话，还可以使用grid布局，以后我估计会写一篇关于grid布局的吧。才疏学浅，就先写到这吧👋。