flex 布局基本概念

flex 布局，也被称为弹性布局，是 CSS3 新增的一种布局，只需要给父元素添加 display: flex; 即可

flex 布局特点

子元素默认横向显示，但是子孙元素不会受影响
子元素会默认变成块级元素，能设置宽度高度
如果只有一个子元素的话，则给子元素添加 margin: auto; 时，子元素会直接实现水平垂直居中效果

弹性盒子概念

Flex 容器：采用 Flex 布局的元素的父元素
Flex 项目：采用 Flex 布局容器里面的子元素
横轴(水平轴)：水平方向轴线
纵轴(垂直轴)：垂直方向轴线
主轴：触发弹性盒子之后，项目的排列方向
侧轴(交叉轴)：触发弹性盒子后，与主轴对立的方向

注：触发弹性盒子之后，项目默认沿主轴排列

flex 布局中的容器属性

交叉轴(侧轴)对齐方式

align-items

属性值：

stretch：拉伸效果，前提是项目没有规定高度，或者高度为 auto
baseline：与 flex-start 一致，实际项目中不会使用 baseline
....

拆行属性

当给元素触发弹性盒子之后，子元素默认没有拆行横向显示，如果显示不下来，会挤压原来的宽度。

flex-wrap 默认值为 nowrap 不换行，设置 flex-wrap: wrap 换行，当显示不下来的时候，会换行显示

注意：当设定项目的高度并且存在父元素宽度不够显示的时候，行与行之间会出现间距(父元素高度足够的话)

原因：如果没有设定项目高度的话，高度默认是拉伸的效果，均分在每一行中，即使设置了高度，每一行的位置也不会变化，只是高度变小

多行侧轴对齐

如果项目过多，添加拆行之后(display: flex; flex-wrap: wrap;)，项目之间会有比较大的行间距，如果要控制多行之间的间距，则需要使用 align-content

align-content 的属性值

flex-start：在侧轴的开始位置显示，没有行间距
flex-end：在侧轴的结束位置结束，没有行间距
center：在侧轴的居中位置显示，没有行间距
space-between：会在侧轴的两端对其显示
....(与 justify-content 的属性值一致)

flex 布局中的项目属性

项目中的属性，主要是对项目(子元素)的修饰

单独侧轴对齐

align-self 可以分别为每一个项目添加对应的对齐效果

align-self 属性：

flex-start: 侧轴的开始位置
flex-end：侧轴的结束位置
baseline：侧轴的基线位置(与 flex-start 一致，开发中不使用)
stretch：侧轴默认拉伸(在不指定高度的情况，或者高度为 auto)
center：侧轴的居中位置

调整显示顺序

order，取值为数值，默认为 auto(可以理解为 0)

结论：order 取值可以为整数，也可以为负数，取值越大越靠后面

剩余空间

flex: 1

主轴在横轴时

如果项目部设置高度，默认高度是拉伸的；项目添加 flex: 1 实现的是占剩余宽度的所有

主轴在侧轴时

如果项目部设置宽度，默认宽度是拉伸的；项目添加 flex: 1 实现的是占剩余高度的所有

flex: 1 详解

flex 属性，其实是一个复合属性，是由：flex-grow、flex-shrink、flex-basis 三个属性的缩写：

flex-grow：定义项目的放大比例。默认为 0，即使存在剩余空间，也不会放大；所有项目的 flex-grow 为 1，则会等分剩余空间。flex-grow 为 n 的项目，占据的空间(放大的比例)是 flex-grow: 1 的 n 倍
flex-shrink：定义项目的缩小比例，取值为 0/1。取值为 0，代表项目不会压缩，项目会溢出；取值为 1 表示在项目溢出的情况下压缩(即使设置了特定宽度)
flex-basis：定义再分配多余空间之前，项目占据的主轴空间(main size)，浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值，默认值为 auto

flex-shrink 应用

flex-shrink 定义项目的缩小比例，主要用于制作移动端横向滚动区域，制作一个滚动条

主要实现思路：

父元素设置 display: flex 和 overflow: auto 属性
子元素设置 flex-shrink: 0 属性

完整代码：

 <style>
     .box {
         display: flex;
         overflow: auto;
         width: 500px;
         height: 100px;
         border: 10px solid gray;
         margin: 100px auto;
     }
     .box > div {
         width: 100px;
         border: 2px dashed red;
         flex-shrink: 0
     }
 </style>
 <body>
     <div class="box">
         <div>1</div>
         <div>2</div>
         <div>3</div>
         <div>4</div>
         <div>5</div>
         <div>6</div>
         <div>7</div>
         <div>8</div>
     </div>
 </body>

CSS-Flex布局基础知识点 | 青训营