flex布局详解

flex布局

前言：由于面试中经常被问到flex布局，今天就仔细学习一下

1. flex布局原理

就是通过给父盒子添加flex属性来控制子盒子的位置和排列方式

2. flex布局父项常见属性

2.1 flex-direction

默认主轴是从左到右

2.2 justify-content（设置主轴居中）

以下例子以默认主轴为准哦！
center（主轴居中对齐）

space-around

space-between

2.3 flex-wrap

• 不换行：元素装不开的话会自动缩小子元素宽度，
• 换行：另起一行摆放子元素

2.4 align-items（设置侧轴居中）

center（垂直居中）重点

2.5 align-content（多行，单行无效）

center

2.6 flex-flow（flex-direction和flex-wrap复合属性）

3. align-content和align-items区别

4. flex布局子项常见属性

4.1 flex属性（重点）

定义子项目分配剩余空间，用flex来表示占多少份数
举个例子，定义3个span。第一，第三个span各占1份，第二个span占2份。

效果如图，还可以自适应哦：

真的很方便布局啊有木有！爱了爱了

4.2 align-self属性（感觉不咋实用，就不详细叙说了 233333）

以上图片来自黑马教程