flex布局
一. flex布局的优点:
- 操作方便,布局极为简单,移动端应用很广泛
- PC 端浏览器支持情况较差
- IE 11或更低版本,不支持或仅部分支持
如果是pc端建议采用传统布局,如果不考虑兼容性也可以使用flex布局.
案例flex初体验:
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
}
div span {
width: 150px;
height: 100px;
background-color: #fff;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
效果图:
二. flex布局原理:
flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以
指定为 flex 布局。
当我们为
父盒子
设为 flex 布局以后,子元素的 float、clear(设置浮动类型) 和 vertical-align(垂直对齐一幅图像) 属性将失效。flex布局的叫法(伸缩布局,弹性布局,伸缩盒布局,弹性盒布局)
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有
子元素
自动成为容器成
员,称为 Flex 项目(flex item),简称"项目"。
flex布局原理:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
三. flex父盒子常见属性:
1. flex-direction 设置主轴的方向:
在 flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有 : 行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向,水平向右
默认侧轴方向就是 y 轴方向,水平向下
- flex主轴和侧轴是可以进行变换的,设置完主轴之后后面的为侧轴
属性值 | 说明 |
---|---|
row | 默认值从左到右 |
row-reverse | 从右到左 |
column | 从上到下 |
column-reverse | 从上到下 |
<style>
div {
/* 给父亲添加flex属性 */
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* flex-direction: row; */
/* flex-direction: row-reverse; 翻转 */
/* 可以把主轴设置为y轴,x轴就变成了侧轴 */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
}
/* 默认的主轴是x,y轴就是侧轴
项目是跟这主轴动的 */
div span {
width: 150px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
2. justify-content 设置主轴上的子元素排列方式:
justify-content 属性定义了项目在主轴上的对齐方式,使用这个属性之前一定要确定好主轴是哪个
属性值 说明 flex-start 默认值 从头部开始 如果主轴是x轴,则从左到右 flex-end 从尾部开始排列 center 在主轴居中对齐(如果主轴是x轴则 水平居中) space-around 平分剩余空间 space-between 先两边贴边 再平分剩余空间(重要) space-evenly 使每个项目之间的距离相等 (兼容性性较差)
关于space-around平分剩余空间的解释:
表面上好像并没有平均分配,实际上是给了这个盒子一个margin-left,然后又给了这个盒子一个相同的 margin-right
3. flex-wrap 设置子元素是否换行:
flex布局不会和传统float(浮动)布局一样,宽度不够自动换行,会缩小项目的宽度,flex布局中默认是不换行的
属性 值说明 nowrap 默认值不换行 wrap 换行
4. align-content 设置侧轴上的子元素的排列方式(多行):
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况**(多行),在单行下是没有效果的**。
属性值 说明 flex-start 默认值在侧轴的头部开始排列 flex-end 在侧轴的尾部开始排列 center 在侧轴中间显示 space-around 子项在侧轴平分剩余空间 space-between 子项在侧轴先分布在两头,再平分剩余空间 stretch 设置子项元素高度平分父元素高度 align-content 和 align-items 区别:
align-items 适用于单行情况下, 只有上对齐、下对齐、居中和 拉伸
align-content 适应于换行(多行)的情况下(单行情况下无效), 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找 align-items 多行找 align-content单
5. align-items 设置侧轴上的子元素排列方式(单行)
该属性是控制子项在**侧轴(默认是y轴)上的排列方式 在子项为单项(单行)**的时候使用
属性值 说明 flex-start 从上到下 flex-end 从下到上 center 挤在一起居中(垂直居中) stretch 拉伸 (默认值 )
6. flex-flow 复合属性,相当于同时设置了 flex-direction 和 flex-wrap:
flex-flow: row wrap;
四. flex子项常见的属性:
1. flex 子项目占的份数:
flex 属性定义子项目分配剩余空间,用flex来表示占多少份数:
注意:flex里面是可以写百分比的,是相对于父元素来说的占多少
<style> section { display: flex; width: 60%; height: 150px; background-color: pink; margin: 0 auto; } section div:nth-child(1) { width: 100px; height: 150px; background-color: red; } /*兩側固定中間自適應*/ section div:nth-child(2) { flex: 1; background-color: greenyellow; } section div:nth-child(3) { width: 100px; height: 150px; background-color: blueviolet; } </style> </head> <body> <section> <div></div> <div></div> <div></div> </section> </body>
效果图:
2. align-self 控制子项自己在侧轴的排列方式:
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性,默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。
<style> div { display: flex; width: 800px; height: 300px; background-color: pink; justify-content: center; } div span { width: 150px; height: 100px; background-color: purple; } div span:nth-child(3) { align-self: flex-end; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body>
效果图:
3. order属性定义子项的排列顺序(前后顺序):
数值越小,排列越靠前,默认为0。注意:和 z-index(当元素之间重叠的时候,z-index 较大的元素会覆盖较小的元素在上层进行显示。)不一样
order: <number>;