文章目录
要持续更新呀 学无止境…
一、了解 felx 布局原理
- 传统布局
- 兼容性好
- 布局繁琐
- 局限性,不能在移动端更好的布局
- flex 布局
- 操作方便,布局极为简单,移动端应用很广泛
- PC 端浏览器支持情况较差
- IE 11 或更低版本,不支持或仅支持部分支持
flex 布局原理
-
flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局
-
当我们为父盒子设为 flex 布局以后,子元素的 float、clear和 vertical-align属性将失效
-
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
-
采用 felx 布局的元素,称为 flex 容器,简称容器,它的所有子元素自动称为容器成员,称为 flex 项目,简称项目
二、flex 布局父项常见属性
以下由6个属性是对父元素设置的
- flex-direction:设置主轴的方向
- justify-content:设置主轴上的子元素排列方式
- flex-wrap:设置子元素是否换行
- align-content:设置侧轴上的子元素的排列方式 (多行)
- align-items:设置侧轴上的子元素的排列方式 (单行)
- flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap
align-content 和 align-items
- align-items 适用于单行情况下,只有上对齐、下对齐、居中和拉伸
- align-content 使用于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
- 总结就是单行找 align-itens 多行找 align-content
1、flex-direction:设置主轴的方向
主轴与侧轴
- 在 flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴
- 默认主轴方向就是 x 轴方向,水平向右
- 默认侧轴方向就是 y 轴方向,垂直向下
- flex-direction 属性决定主轴的方向(即项目的排列方向)
- 注意:主轴和侧轴是会变化的,就看 flex-direction 设置为主轴,剩下的就是侧轴,而我们的子元素是跟着主轴来排列的
属性值 | 解释说明 |
---|---|
row | 默认值从左到右 |
row-reverse | 从右到左 |
column | 从上到下 |
column-revese | 从上到下 |
div {
display: flex;
width: 400px;
height: 400px;
background-color: blanchedalmond;
/* 默认主轴是水平从左往右 */
/* flex-direction: row; */
/* 主轴 水平从右往左 */