flex布局体验
- 操作方便，布局非常简单，移动端应用非常广泛
- PC端浏览器支持情况比较差
- IE11或者更低的版本，不支持或者只支持一部分
建议：
- PC端布局，还是最好使用传统布局
- 移动端或者不考虑兼容性问题的PC端页面布局，还是最好使用flex弹性布局
flex布局原理
- 弹性布局，为盒模型提供最大的灵活性，任何一个容器都可以被指定为flex布局
- 当父盒子设为flex布局，子元素的float，clear，vertical-align均会失效（效果比这三者更为精确）
- 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
- 采用flex布局的元素，称之为flex容器，所有子元素自动成为容器成员，称之为flex项目
- flex布局原理：通过给父盒子添加flex属性，控制子盒子的位置和排列方式
flex常见属性
父项常见属性
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上的子元素的排列方式（多行
） - align-items：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
flex-direction设置主轴的方向
主轴和侧轴
在flex布局里，是分为主轴和侧轴两个方向，同样的叫法有：行和列，X轴和Y轴
- 默认主轴方向就是x轴方向，水平向右
- 默认侧轴方向就是y轴方向，垂直向下
- flex-direction决定主轴的方向（项目排列方向）
- 注意：主轴和侧轴是会变化的，就看flex-direction设置谁是主轴，剩下的就是侧轴。子元素就是跟着主轴来进行排列的。
属性值 解释说明 row 默认值，从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上 -
row:
-
row-reverse:
-
column:
-
column-reverse:
justify-content主轴上子元素排列方式
- justify-content属性定义了项目在主轴上的对齐方式
- 注意：使用这个属性之前一定要确定好主轴是哪一个
属性值 解释说明 flex-start 默认值，从头部开始，如果主轴是x轴那么就从左往右 flex-end 从尾部开始排列 center 在主轴居中对齐，（x轴的话就是水平居中） space-around 平分剩余空间 space-between 先两边贴边，再平分剩余空间（重要）
（主轴为row的情况）：
-
flex-start:
-
flex-end:
-
center:
-
space-around:
-space-between:
flex-wrap设置子元素是否换行
- 默认情况下，项目都排在一条线（轴线）上
- flex-wrap属性定义，flex布局中默认是不换行的
属性值 解释说明 nowrap 默认值，不换行 wrap 换行 -
如果设置的是不换行，子元素个数过多，不够分摊父级容器的宽度，子元素会压缩自己的宽度，达到平摊的目的，比如：
-
设置换行的话：
align-items侧轴上子元素排列方式（单行）
- 控制子项在侧轴（默认为y轴）上的排列方式
- 在子项为单行的时候使用
属性值 解释说明 flex-start 默认值，从上到下 flex-end 从下到上 center 挤在一起居中（垂直居中） stretch 拉伸
（主轴为x轴，即row）
-
flex-start:
-
flex-end:
-
center:
- stretch:
（前提是去掉子元素的高度，让其自然拉伸）
为了展示效果还是加一条靠边水平平分
获得一个新的水平垂直居中的好办法：
在父盒子添加align-items:center与justify-content:center就可以实现水平垂直居中的效果了，方便又省事
div {
display: flex;
width: 400px;
height: 400px;
background-color: pink;
/* flex-direction: row; */
justify-content: center;
/* flex-wrap: wrap; */
align-items: center;
}
span {
width: 100px;
height: 100px;
background-color: purple;
}
效果图
align-content侧轴上子元素排列方式（多行）
- 设置子项在侧轴上的排列方式，只能用于子项出现换行的情况（多行），在单行下是没有效果的
属性值 解释说明 flex-start 在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴的中间进行显示 space-around 子项在侧轴平分剩余空间 space-between 子项在侧轴先分布在两头，再平分圣域空间 stretch 设置子项元素高度平分父元素高度
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
display: flex;
width: 800px;
height: 800px;
background-color: pink;
flex-direction: row;
flex-wrap: wrap;
/* justify-content: center; */
}
span {
width: 250px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</body>
</html>
效果图
-
flex-start:
-
flex-end:
-
center:
-
space-around:
-
space-between:
-
stretch:
跟不设置的时候默认样式一样，因为给子元素设置了高度
取消子元素的高度属性之后
align-content与align-items区别：
- align-items适应于单行情况，只有上对齐，下对齐，居中与拉伸
- align-content适应于换行（单行情况下无效），可以设置上对齐，下对齐，居中，拉伸和平均分配剩余空间等属性值
-
总的来说就是单行找align-items，多行找align-content
flex-flow
- 它是flex-direction和flex-wrap属性的复合属性
比如： - flex-flow:row nowrap;
flex-flow:row nowrap;
与
flex-direction:row;
flex-wrap:nowrap;
是等效的
子项常见属性
flex属性（重要）
- flex属性定义的是子项目分配父盒子的剩余空间，用flex来表示占有多少份数
- 属性值为数字，数字为1，表示占总份数的1份，默认值为0
.item {
flex:<number>;/*default0*/
}
例子代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 60%;
height: 80px;
margin: 50px auto;
background-color: pink;
}
section div:nth-child(1),section div:nth-child(3) {
width: 80px;
height: 80px;
background-color: skyblue;
}
section div:nth-child(2) {
flex: 1;
height: 80px;
background-color: green;
}
.box {
display: flex;
width: 60%;
height: 80px;
background-color: pink;
margin: 0 auto;
}
.box span {
flex: 1;
}
.box span:nth-child(2) {
flex: 2;
background-color: purple;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
flex:2表示box大盒子下的三个span占了四份，其中，2占了两份
align-self与order属性
- align-self属性表示允许单个项目有与其他项目不一样的对齐方式，可以覆盖掉父级元素的align-items属性
- 默认值是auto，表示继承父级元素的align-items属性，如果没有父级元素，等于stretch（拉伸）
div {
display: flex;
width: 800px;
height: 800px;
background-color: pink;
flex-flow: row wrap;
align-items: flex-start;
}
span {
width: 250px;
height: 100px;
margin-right: 10px;
margin-bottom: 10px;
background-color: purple;
}
span:nth-child(2) {
align-self: flex-end;
}
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
效果图
- order属性定义项目的排列顺序
- 数值越小，排列越靠前，默认为0
- 注意：和z-index不一样
span:nth-child(2) {
/* align-self: flex-end; */
/* 调整子项加载的顺序，默认值为0，如果想要往前提，属性值可以为负值 */
order: -1;
/* 如果前面的元素想要往后移动，属性值要比前面的都大 */
order:1;
}
每个子项的默认值都是0，只要是大于0或者小于0的负值都可以进行顺序的调整了
设置为1的情况，2跑到3后面了
网友评论