页面自适应布局，且平均等分
<style>
div {
width: 100%;
height: 100%;
display: flex;
background-color: cornsilk;
/*space-around表示平分剩余空间*/
justify-content: space-around;
}
div span {
flex: 1;
height: 100px;
background-color: blue;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
布局原理
采用Flex布局的元素称为Flex容器（弹性容器），它的所有子元素自动成为容器成员，称为Flex项目（弹性元素）。例如上例中div就是flex父容器，span就是子容器flex项目。子容器可以横向排列也可以纵向排列。总结：通过给父盒子添加flex属性，来控制盒子的位置和排列方式
flex布局中父项的常见属性（弹性容器）
- flex-direction：主轴和侧轴又叫x轴和y轴。默认主轴方向是x轴方向，水平向右；默认侧轴方向是y轴方向，垂直向下。
- row：默认值为row，主轴方向从左到右
- row-reverse：从右到左
- column：从上到下
- column-reverse：从下到上
<style>
div {
width: 100%;
height: 100%;
display: flex;
background-color: pink;
justify-content: space-around;
/*设置主轴的方向为从上到下*/
flex-direction: column;
}
div span {
width: 100px;
height: 100px;
background-color:silver;
margin-bottom: 5px;
}
</style>
<div>
<span>首页</span>
<span>添加</span></span>
<span>删除</span>
</div>
- justify-content：设置主轴上的子元素排列方式，分配主轴上的空白空间
- flex-start：默认值为flex-start，如果主轴是x轴，则元素从左到右，沿着主轴起边排列
- flex-end：从尾部开始排列，沿着主轴终边排列
- center：在主轴居中对齐
- space-around：平分剩余空间
- space-between：先两边贴边再平分剩余空间
- space-evenly：使得每个元素的间隔相等
<style>
div {
width: 800px;
height: 400px;
display: flex;
background-color: pink;
flex-direction: row;
/*先两边贴边，再平分剩余空间*/
justify-content: space-between;
}
div span {
width: 100px;
height: 100px;
background-color:silver;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
- flex-wrap：设置子元素（弹性元素）是否换行（沿着辅轴换行）
- nowrap：默认值，不换行
- wrap：换行，沿着辅轴换行
- wrap-reverse：元素沿着辅轴反方向换行
- align-content：设置侧轴上的子元素的排列方式（针对多行,只能用于子项出现多行的情况，单行是无效的）
- flex-start：默认值，再侧轴的头部开始排列
- flex-end：在侧轴的尾部开始排列
- center：在侧轴中间显示
- space-around：子项在侧轴平分剩余空间
- space-between：子项在侧轴先分布在两头，再平分剩余空间
- stretch：设置子项元素高度平分父元素高度
<style>
div {
width: 800px;
height: 400px;
display: flex;
background-color: pink;
/*设置主轴的方向*/
flex-direction: row;
/*设置换行*/
flex-wrap: wrap;
align-content: space-between;
}
div span {
width: 100px;
height: 100px;
background-color:silver;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span></span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span></span>
<span>7</span>
<span>8</span>
</div>
- align-items：设置侧轴上的子元素的排列方式（单行）
- stretch：将元素的长度设置为相同的值
- flex-start：从上到下，沿着辅轴起边对齐
- flex-end：从下到上，沿着辅轴的终边对齐
- center：垂直居中
<style>
div {
width: 800px;
height: 400px;
display: flex;
background-color: pink;
justify-content: space-around;
flex-direction: row;
/*主轴居中*/
justify-content: center;
/*侧轴居中*/
align-items: center;
}
div span {
width: 100px;
height: 100px;
background-color:silver;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span></span>
<span>3</span>
<span>4</span>
</div>
- flex-flow：复合属性，等同于同时设置flex-direction和flex-wrap
<style>
div {
width: 400px;
height: 400px;
display: flex;
background-color: pink;
/*设置主轴的方向*/
/* flex-direction: row; */
/*设置换行*/
/* flex-wrap: wrap; */
/*简写形式*/
flex-flow: row wrap;
}
div span {
width: 100px;
height: 100px;
background-color:silver;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span></span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span></span>
<span>7</span>
<span>8</span>
</div>
flex布局中子项的常见属性（弹性元素）
- flex：flex属性定义子项目分配剩余空间，用flex来表示占多少份数
/*左右固定，中间自适应*/
<style>
section {
display: flex;
width: 600px;
height: 150px;
/*水平居中*/
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: blue;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: green;
}
</style>
<section>
<div></div>
<div></div>
<div></div>
</section>
/*将p标签中的span平均分为三等份*/
<style>
p {
display: flex;
width: 600px;
height: 150px;
/*水平居中*/
margin: 150px auto;
}
p span:nth-child(1) {
flex: 1;
background-color: green;
}
p span:nth-child(2) {
flex: 1;
background-color: red;
}
p span:nth-child(3) {
flex: 1;
background-color: blue;
}
/* p span {
flex: 1;
}
/*第二个span占两份，13各一份*/
p span:nth-child(2) {
flex: 2;
background-color: chartreuse;
} */
</style>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
- align-self：控制子项自己在侧轴的排列方式，用于覆盖align-items属性对于某个子项的设置
<style>
div {
display: flex;
flex-direction: row;
width: 300px;
height: 300px;
background-color: royalblue;
}
div span {
width: 100px;
height: 100px;
background-color: pink;
}
/*单独设置二号盒子在侧轴上的排列方式*/
div span:nth-child(2) {
align-self: flex-end;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
- order：定义子项的排列顺序（前后顺序）
- 数值越小，排列顺序越靠前，默认为0
- flex-grow：指定弹性元素的伸展的系数。当父元素有多余空间时，子元素如何伸展；父元素的剩余空间，会按照比例进行分配。
- flex-shrink：指定弹性元素的收缩系数。当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩。
- flex-basis: 指定元素在主轴上得基础长度
- 如果主轴是横向的，则该值指定的就是元素的宽度
- 如果主轴是纵向的，则该值指定的就是元素的宽度
- 默认值是auto，表示参考元素自身的高度或者宽度，如果传递了一个具体数值则以该数值为准。
- flex：可以设置弹性元素所有的三个样式
- flex 增长 缩减 基础;其值有如下：
flex：initial，代表flex:0 1 auto flex：auto, 代表flex:1 1 auto flex: none,代表flex:0 0 auto