Flex布局做出⾃适应页⾯（语法和案例）
Flex布局简介
Flex英⽂为flexiable box，翻译为弹性盒⼦，Flex布局即弹性布局。
Flex布局为盒⼦模型提供了很⼤的灵活性，任何⼀个容器都可以指定为Flex布局，设置⽅法为：
.box{
display: flex;
}
⾏内元素使⽤Flex布局
.box{
display: inline-flex;
}
在webkit内核的浏览器上必须加上webkit前缀
.box{
display: flex;
display: -webkit-flex;
}
注意：使⽤Flex布局之后，⾥⾯的float、clear、vertical-align属性将失效。
Flex布局中的基本概念
采⽤ Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有⼦元素⾃动成为容器成员，称为 Flex 项⽬（flex item），简称"项⽬"。
容器默认存在两根轴：⽔平的主轴（main axis）和垂直的侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；侧轴的开始位置叫做cross start，结束位置叫做cross end。
项⽬默认沿主轴排列。单个项⽬占据的主轴空间叫做main size，占据的侧轴空间叫做cross size。
容器的属性
1、flex-driection
2、flex-wrap
3、flex-flow
4、justify-content
5、align-items
6、align-content
1、flex-driection设置项⽬的排列⽅向，默认为row
flex-driection: row | row-reverse | column | column-reverse
当设置为flex-driection: row，效果：
当设置为flex-driection: row-reverse，效果：
当设置为flex-driection: column，效果：
当设置为flex-driection: column-reverse，效果：
如下代码直接复制保存为html⽂件即可以查看效果：
<style type="text/css">
.box{
display: flex;
display: -webkit-flex;
/*⽔平⽅向，左端对齐*/
flex-direction: row;
/*⽔平⽅向，右端对齐*/
/*flex-direction: row-reverse;*/
/*垂直⽅向，顶部对齐*/
/*flex-direction: column;*/
/*垂直⽅向，底部对齐*/
/*flex-direction: column-reverse;*/
background: #999;
width: 100%;
}
.box span{
margin: 10px 10px;
padding: 10px;
background: #ff0;
width: 50px;
}
</style>
<div class="box">
<span>你好1</span>
<span>你好2</span>
<span>你好3</span>
<span>你好4</span>
</div>
2、flex-wrap设置项⽬是否在⼀条线上，默认为nowrap
flex-wrap: wrap | nowrap | wrap-reverse
当设置为flex-wrap: wrap，效果：
当设置为flex-wrap: nowrap，效果（不换⾏，默认会缩放）：
当设置为flex-wrap: wrap-reverse，效果（第⼀⾏在下⽅）：
如下代码直接复制保存为html⽂件即可以查看效果：
<style type="text/css">
.box{
display: flex;
display: -webkit-flex;
/*换⾏*/
/*flex-wrap: wrap;*/
/*不换⾏，默认*/
/*flex-wrap: nowrap;*/
/*换⾏，第⼀⾏在下⽅*/
/
*flex-wrap: wrap-reverse;*/
background: #999;
width: 100%;
}
.box span{
margin: 10px 10px;
padding: 10px;
background: #ff0;
width: 50px;
}
</style>
<div class="box">
<span>你好1</span>
<span>你好2</span>
<span>你好3</span>
<span>你好4</span>
<span>你好5</span>
<span>你好6</span>
<span>你好7</span>
</div>
3、flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
4、justify-content属性定义项⽬在主轴上的对齐⽅式，默认值为flex-start
justify-content: flex-start | flex-end | center | space-between | space-around
当设置为justify-content: flex-start，效果：
当设置为justify-content: flex-end，效果：
当设置为justify-content: center，效果：
当设置为justify-content: space-between，效果：
当设置为justify-content: space-around，效果：
如下代码直接复制保存为html⽂件即可以查看效果：
<style type="text/css">
css布局左边固定右边自适应.box{
display: flex;
display: -webkit-flex;
/*默认，项⽬左对齐*/
justify-content: flex-start;
/*项⽬右对齐*/
/*justify-content: flex-end;*/
/*项⽬居中对齐*/
/*justify-content: center;*/
/*项⽬两端对齐*/
/*justify-content: space-between;*/
/*每个项⽬两侧的间隔相等*/
/*justify-content: space-around;*/
background: #999;
width: 100%;
}
.box span{
margin: 10px 10px;
padding: 10px;
background: #ff0;
width: 50px;
}
</style>
<div class="box">
<span>你好1</span>
<span>你好2</span>
<span>你好3</span>
<span>你好4</span>
<span>你好5</span>
<span>你好6</span>
<span>你好7</span>
</div>
5、align-items属性定义项⽬在纵轴上的对齐⽅式，默认值为stretch，适⽤于项⽬在纵轴上⾼度不⼀样的情况，为了更好的看到效果，我为项⽬添加了⼀些样式
align-items: flex-start | flex-end | center | baseline | stretch
当设置为align-items: flex-start，效果：
当设置为align-items: flex-end，效果：
当设置为align-items: center，效果：
当设置为align-items: baseline，效果：
当设置为align-items: stretch，效果：
如下代码直接复制保存为html⽂件即可以查看效果：
<style type="text/css">
.box{
display: flex;
display: -webkit-flex;
/*纵轴的顶部对齐*/
/*align-items: flex-start;*/
/*纵轴的底部对齐*/
/*align-items: flex-end;*/
/*纵轴的中点对齐*/
/*align-items: center;*/
/*项⽬的第⼀⾏⽂字的基线对齐*/
/
*align-items: baseline;*/
/*默认对齐⽅式，如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度*/
align-items: stretch;
background: #999;
width: 100%;
}
.box span{
margin: 10px 10px;
padding: 10px;
background: #ff0;
width: 50px;
}
.box span:nth-of-type(2n){
height: 80px;
padding-top: 20px;
}
</style>
<div class="box">
<span>你好1</span>
<span>你好2</span>
<span>你好3</span>
<span>你好4</span>
<span>你好5</span>
<span>你好6</span>
<span>你好7</span>
</div>
6、align-content属性定义了多根轴线的对齐⽅式。如果项⽬只有⼀根轴线，该属性不起作⽤。(即需要设置容器的flex-wrap属性值为wrap)(为了让效更加明显，我设置了容器的⾼度)
align-content: flex-start | flex-end | center | space-between | space-around | stretch
当设置为align-content: flex-start，效果：
当设置为align-content: flex-end，效果：
当设置为align-content: center，效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。