CSS 弹性布局 flex

最新推荐文章于 2023-06-13 10:18:18 发布

「已注销」

最新推荐文章于 2023-06-13 10:18:18 发布

阅读量589

点赞数 2

分类专栏： # H5C3 文章标签： flex css3 html

本文链接：https://blog.csdn.net/Ares5kong/article/details/116270712

版权

H5C3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

常用场景

当碰见多个盒子之间, 间距比较有规律的布局时, 或者需要垂直居中时, 本人比较喜欢用 flex 布局, 避免了很多浮动。

理论

flex 布局概念图:

名词解释:

1. 容器：

flex 布局需要先定义一个外层盒子, 该盒子被称作容器, 既上图中蓝色背景的盒子。

2. 项目：

容器内部的每一个盒子都被称为项目, 既上图中黄色背景的盒子。

3. 主轴：

flex 布局时容器会有 x轴和 y轴的概念, 这时需要指明到底哪个是主轴, 然后容器内的项目会按照主轴去排列,

x轴是主轴时, 容器内的项目水平排列(左右、右左)。 y轴是主轴时, 容器内的项目垂直排列(上下、下上)

4. 侧轴：

当主轴确定后, 另外一个就是侧轴。既 x轴是主轴时 y轴就是侧轴。 y轴是主轴时, x轴就是侧轴。

5. 属性：

容器属性: 可以定义该盒子为一个弹性容器, 也可以选定主轴, 或者指定容器内项目的对齐方式和排列方式等。

项目属性: 定义自己所占的剩余空间, 或者想对自己设置独特的排列方式等。

1. 容器常用属性

属性	常用值	描述
display	flex	将元素变为弹性盒子, 是不能省略的属性
flex-direction	row、row-reverse、column、column-reverse	选定主轴和排列方式
justify-content	flex-start、flex-end、center、space-between、space-around	指定主轴上项目的对齐方式
flex-wrap	nowrap、wrap、wrap-reverse	指定项目是否换行
align-items	stretch、flex-start、flex-end、center	设置侧轴上项目的对齐方式 (单行)
align-content	stretch、flex-start、flex-end、center、 space-between、space-around	设置侧轴上项目的对齐方式 (多行)
flex-flow	flex-flow: flex-direction flex-wrap	flex-direction 和 flex-wrap 的连写简写

2. 项目常用属性

属性	常用值	描述
flex	数值	指定当前项目所占剩余空间的份数
align-self	auto、flex-start、flex-end、center、stretch	指定当前项目在侧轴的排列方式

常用属性效果演示

1. 容器属性效果演示

(1) flex-direction 选定主轴和指定排列方式

① 主轴: x轴

② 主轴: y轴

(2) justify-content 指定主轴对齐方式

① 主轴: x轴

② 主轴: y轴

(3) flex-wrap 是否换行

① 主轴: x轴

② 主轴: y轴

(4) align-items 侧轴对齐方式注: 仅单行时才能准确居中, 单行指得是主轴

① 主轴: x轴

② 主轴: y轴

(5) align-content 侧轴对齐方式注: 仅多行时才能准确居中, 多行指得是主轴

① 主轴: x轴

② 主轴: y轴

2. 项目属性效果演示

项目属性一般来说最常用得就是 flex 属性了。

x轴主轴: 常用场景就是, 容器内部左右两侧, 各有一个固定宽度的项目, 想让两个项目中间得剩余空间自动平均分配宽度。

y轴主轴: 常用场景就是, 容器内部上下两侧, 各有一个固定高度的项目, 想让两个项目中间得剩余空间自动平均分配高度。

x轴主轴的效果：

x轴主轴的代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Flex</title>
  <style>
    .flex_container {
      display: flex;
      width: 1000px;
      height: 300px;
      border: 1px solid black;
    }

    .item {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

    .item_auto {
      flex: 1;
      margin-left: 5px;
      height: 200px;
      background-color: skyblue;
    }

    .item_auto2 {
      flex: 2;
      margin-left: 5px;
      margin-right: 5px;
      height: 200px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
<div class="flex_container">
  <div class="item">固定大小</div>
  <div class="item_auto">预想把剩余空间分为三份, 本项目占一份 flex: 1</div>
  <div class="item_auto2">预想把剩余空间分为三份, 本项目占两份 flex: 2</div>
  <div class="item">固定大小</div>
</div>
</body>
</html>