flex 弹性布局常用属性

2022-12-28 15:54:24 浏览数 (4)

  • 1. flex 布局介绍

  • 2. flex-direction - 设置主轴的方向
  • 3. justify-content - 设置主轴上的子元素排列方式
  • 4. flex-wrap - 设置子元素是否换行
  • 5. align-items - 设置侧轴上的子元素排列方式 (单行)
  • 6. align-content - 设置侧轴上的子元素排列方式 (多行)
  • 7. flex-flow - 复合属性 (flex-direction 和 flex-wrap)
  • 8. 基础代码 - 练习 flex 布局
1. flex 布局介绍

flex 是 Flexible Box 的缩写, 意为弹性布局。用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局

flex 布局原理: 通过给父元素添加 flex 属性,来控制子盒子的位置和排列方式

2. flex-direction - 设置主轴的方向

在 flex 布局中,分为主轴和侧轴两个方向,也称为 x 轴 和 y 轴

默认主轴方向就是 x 轴方向,水平向右;默认侧轴方向就是 y 轴方向,垂直向下

flex-direction 属性就是用于决定主轴的方向的,即项目的排列方向(子元素是跟着主轴方向来排列的)

属性值

描述

row

从左到右 (默认值)

row-reverse

从右到左

column

从上到下

column-reverse

从下到上

3. justify-content - 设置主轴上的子元素排列方式

justify-content 属性用于定义项目在主轴上的对齐方式,使用之前一定要确定好主轴是哪个

属性值

描述

flex-start

从头部开始排列 (默认值)

flex-end

从尾部开始排列

center

在主轴居住对齐

space-around

平分剩余空间

space-between

先两边贴边,再平分剩余空间 (重要)

4. flex-wrap - 设置子元素是否换行

在 flex 布局中,子元素默认是不换行的,如果装不下,会自动缩小子元素的宽度

属性值

描述

nowrap

不换行 (默认值)

wrap

换行

5. align-items - 设置侧轴上的子元素排列方式 (单行)

属性值

描述

flex-start

从上到下 (默认值)

flex-end

从下到上

center

垂直居中

stretch

拉伸 (子元素不能设置高度)

6. align-content - 设置侧轴上的子元素排列方式 (多行)

多行指的是有换行的情况下,在单行下是没有效果的

属性值

描述

stretch

子项高度平分父元素高度 (默认值)

flex-start

在侧轴的头部开始排列

flex-end

在侧轴的尾部开始排列

space-around

子项在测轴平分剩余空间

space-between

子项在测轴先分布在两头,再平分剩余空间

align-items 和 align-content 区别 ?

align-items 适用于单行情况下,只有上对齐、下对齐、居中和拉伸

align-content 适用于有换行的情况下,不仅有上对齐、下对齐、居中、拉伸,还有平均分配剩余空间的属性值

总结: 子项单行用 align-items,多行(换行) 用 align-content

7. flex-flow - 复合属性 (flex-direction 和 flex-wrap)

flex-flow 是 flex-direction 和 flex-wrap 的复合属性,下面两种书写方式等价

代码语言:javascript复制
flex-flow: row wrap;
代码语言:javascript复制
flex-direction: row;
flex-wrap: wrap;
8. 基础代码 - 练习 flex 布局

代码语言:javascript复制
<style>
div {
width: 80%;
height: 300px;
background-color: #abcdef;
}
div span {
width: 150px;
height: 100px;
background-color: orange;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>

0 人点赞