一文带你读懂css中的弹性布局

最新推荐文章于 2024-07-30 14:52:07 发布
最新推荐文章于 2024-07-30 14:52:07 发布
阅读量57 收藏
点赞数
文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79454177/article/details/134865759
版权

1. 弹性盒子基础

为了能够让元素对不同的屏幕尺寸和不同的显示设备做好自适应的准备，W3C引出弹性盒模型。弹性盒模型非常依赖父子级关系，在块级元素上声明 display: flex 便可以激活弹性盒布局，这个元素称为弹性容器，负责所占空间内子元素的布置。弹性容器内的元素称为弹性元素。

2. 举个例子

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .box {
    width: 500px;
    display: flex;
    height: 120px;
    background-color: pink;
  }

  p {
    background-color: yellow;
  }

  .child {
    margin: 0 10px;
    background-color: skyblue;
    align-self: stretch;
  }
</style>
<div class="box">
  <p>我是p标签，块级标签哦！</p>
  <span class="child">span标签</span>
  <p class="child">3</p>
</div>

值得注意的是：我们为div元素开启弹性盒模型之后，只有直接子元素才会开启弹性盒布局，其后代的布局方式不会受到影响。在弹性容器中，各个弹性元素在主轴上排列，我们可以通过改变主轴的方向的方式改变弹性盒子的排列方式。通过效果图可以清楚的看到弹性盒子并没有占满整个弹性容器，我们可以通过设置对应的属性将多余的空间合理的分配给每一个弹性盒子。

3. 弹性容器中的属性

3.1.  flex-direction

作用

将所有的弹性盒子改为从左到右、从右到左、从上到下、从下到上的排列方式。

值

row | row-reverse | column | column-reverse

默认值

row

<style>
  ul{
    display: flex;
  }
  #one {
    background-color: pink;
    flex-direction: row;
  }
  #two {
    background-color: yellow;
    flex-direction: row-reverse;
  }

  #three {
    background-color: blue;
    flex-direction: column-reverse;
  }

  #four {
    background-color: purple;
    flex-direction: column;
  }
</style>
<ul id="one">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul id="two">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul id="three">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<ul id="four">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

3.2. flex-wrap

当弹性盒子在弹性容器的主轴上放置不下的时候，默认情况下是不会换行的，也不会自动设置尺寸。这样就导致弹性盒子会超出弹性容器的边界。

这个行为是可以被我们控制的，我们可以允许弹性元素换行展示，这样就有效的避免了弹性元素从弹出容器中溢出。

作用

设置弹性元素换行

值

no-wrap | wrap | wrap-reverse

默认值

no-wrap

在允许换行时，wrap 和 wrap-reverse的区别在于多出来的行是在第一行之前展示还是在第一行之后展示。

<style>
  ul {
    width: 120px;
    display: flex;
    margin-top: 10px;
  }

  #zero {
    background-color: green;
  }

  #one {
    background-color: pink;
    flex-wrap: wrap;
  }

  #two {
    background-color: yellow;
    flex-wrap: wrap-reverse;
  }
</style>
<ul id="zero">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<ul id="one">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
<ul id="two">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

3.3. flex-flow

作用

定义弹性流 ，flex-wrap 和  flex-direction 这两个属性的简写模式。

值

flex-direction || flex-wrap

默认值

row no-wrap

3.4.  justify-content

这个属性的作用是如何将弹性容器的空间分配给主轴方向上的弹性元素。

作用

各行弹性元素的布局

值

flex-start,flex-end, space-between, space-around ,center ,space-evenly

默认值

flex-start

值

描述

flex-start

默认值，左对齐

flex-end

右对齐

center

居中

space-between

两端对齐，项目之间的间隔是相等的

space-around

每个项目两侧的间隔相等

initial

将此属性设置为属性的默认值

inherit

从父元素继承属性的值

<style>
  .flex {
    display: flex;
    margin-top: 50px;
    border: 1px solid rgb(43, 35, 205);
  }

  .flex div {
    width: 60px;
    height: 60px;
    margin-bottom: 5px;
    border: 1px solid pink;
  }

  .flex-start {
    justify-content: flex-start;
  }

  .flex-end {
    justify-content: flex-end;
  }

  .center {
    justify-content: center;
  }

  .space-between {
    justify-content: space-between;
  }

  .space-around {
    justify-content: space-around;
  }

  .space-evenly {
    justify-content: space-evenly;
  }
</style>
</head>

<body>
  <div class="flex flex-start">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div class="flex flex-end">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div class="flex center">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div class="flex space-between">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div class="flex space-around">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
  <div class="flex space-evenly">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
  </div>
</body>

3.5. align-items

作用

这个属性的作用是设置弹性元素的对齐方式

值

flex-start,flex-end,center ,stretch

默认值

stretch

值

描述

flex-start

默认值，左对齐

flex-end

右对齐

center

居中

stretch

拉伸

div{
  display: flex;

  justify-content: center;

  align-items: center;
 
}

div{align-items: flex-start;}

align-items: flex-end;

align-items: stretch;

4. 弹性元素中的属性

弹性容器的子元素是弹性元素，一个元素可以同时是弹性容器和弹性元素

4.1. order

作用

决定弹性元素的排列顺序，数值越小，排列越靠前

值

数字类型

默认值

0

<style>
  ul li:nth-child(3) {
    background-color: red;
    order: -1;
  }
</style>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

4.2. flex-grow

如果存在弹性容器存在剩余空间，未设置此属性时，弹性元素不放大。

作用

决定弹性元素的增长系数

值

大于0的数字类型

默认值

0

<style>
  ul {
    display: flex;
    border: 1px solid black;
    justify-content: space-around;
    height: 300px;
    width: 1000px;
  }

  ul li:nth-child(1) {
    width: 100px;
    background-color: blue;
    flex-grow: 5
  }

  ul li:nth-child(2) {
    width: 100px;
    background-color: green;
    flex-grow: 3
  }

  ul li:nth-child(3) {
    width: 100px;
    background-color: red;
    flex-grow: 2
  }
</style>

思考题目

计算上图中三个盒子的宽度。

答案

解析

蓝色盒子宽度计算方式如下：

    1. 弹性容器剩余空间为：1000 - 300=700 px
    2. 蓝色盒子需要缩小像素值： （ 700 /（ 5+3+2 ））*5 =350 px
    3. 蓝色盒子的宽度为： 100 + 350 = 450 px

4.3. flex-shrink

弹性元素的缩减系数。开发者未设置此属性时，如果弹性容器空间不足，该弹性元素适当缩小。

如果设置为0，即便弹性容器空间不足，弹性元素不再缩小。

作用

决定弹性元素的增长系数

值

大于0的数字类型

默认值

1

<style>
  ul {
    display: flex;
    border: 1px solid black;
    height: 300px;
    width: 800px;
  }

  ul li:nth-child(1) {
    width: 300px;
    flex-shrink: 0
  }

  ul li:nth-child(2) {
    width: 300px;
    background-color: blue;
    flex-shrink: 0
  }

  ul li:nth-child(3) {
    width: 300px;
    background-color: red;
    flex-shrink: 1;
  }
</style>

思考题目

<style>
  ul {
    display: flex;
    border: 1px solid black;
    justify-content: space-around;
    height: 300px;
    width: 800px;
  }

  ul li:nth-child(1) {
    width: 300px;
    flex-shrink: 1
  }

  ul li:nth-child(2) {
    width: 300px;
    background-color: blue;
    flex-shrink: 6
  }

  ul li:nth-child(3) {
    width: 300px;
    background-color: red;
    flex-shrink: 3;
  }
  <style>

答案：

解析：

蓝色盒子宽度计算方式如下：

    1. 弹性容器剩余空间为：800 - 900 = -100 px
    2. 蓝色盒子需要缩小像素值：（ 100 / (1 + 6 + 3 ) ）* 6 = 60px
    3. 蓝色盒子的宽度为：300 - 60 = 240 px

4.4. flex

作用

属性的简写

值

flex-grow flex-shrink flex-auto

默认值

0 1 auto

前端-昊蓝
关注
【Servlet篇】一文带你读懂Request对象
zhangxia_的博客
02-20 3181
最近一直在更新 Servlet 的文章，在前面一篇中说到 sevice() 方法由 Servlet 容器调用执行，而该方法中有两个重要的参数，分别是 Request 对象和 Response 对象，下面我们就来探讨这两个参数究竟有何作用。
一文读懂嵌入式Wi-Fi天线设计对pcb布局布线和结构的要求
01-19
随着市场竞争的加剧，硬件设备正以集成化的方向发展。天线也由外置进化内置再进化到嵌入式，我们先来介绍这类应用的天线种类： ⑴ On Board板载式:采用pcb蚀刻一体成型，性能受限，极低成本，应用于蓝牙、Wi-Fi模组...
弹性盒子的布局
jan_ping的博客
02-13 6710
1 弹性盒子(弹性布局) 1.1 弹性布局介绍 Flexbox是flexible box的简称(意思是"灵活的盒子容器")，是CSS3引入的新的布局模式。它决定了 元素如何在页面商排列，使他们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为Flexbox，是因为它能够扩展和收缩flex容器内地元素，以最大限度地填充可用空 间。与以前布局方式(如table布局和浮动元素内嵌元素)相比，Flexbox是一个更强大的方式 （1）在不同方向排列元素 （2）重新排列元素的显示顺序 （3）更改元
CSS布局之Flex-box弹性盒子布局详解
最新发布
m0_75116965的博客
07-30 1562
详细介绍Flex-box弹性盒子布局的整体属性用法
弹性盒布局
weixin_42447364的博客
06-12 1101
flex 弹性盒子 两列布局
一文带你读懂计算机视觉
01-27
最近，我已经阅读了很多与计算机视觉相关的资料并做了大量实验，这里介绍了在该领域学习和使用过程中有意思的内容。近年来，计算机视觉取得了很大进展。这些是我将在这里提到的主题：技术：人脸检测：Haar，HOG，...
一文带你读懂Mysql和InnoDB存储引擎
01-27
作为一名开发人员，在日常的工作中会难以避免地接触到数据库，无论是基于文件的 sqlite还是工程上使用非常广泛的MySQL、PostgreSQL，但是一直以来也没有对数据库有一个非常清晰并且成体系的认知，所以最近两个月的...
flex布局
anyicha9151的博客
08-15 125
弹性布局 display: flex; display: -webkit-flex; /* Safari */ 容器盒子属性 flex-direction 决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 co...
弹性盒子（flex布局）
weixin_54044338的博客
03-09 161
弹性盒子/flex布局
CSS:弹性盒子Flexible Box布局
LiuCJ_20000的博客
02-28 896
​ flex是flexible Box的缩写,意为 ”弹性布局“，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。当我们的父盒子设置为flex布局之后，子元素的 float 、clear 和 vertical-align 属性将会失效。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局​ **flex布局原理：**通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。
Css3之Flex布局
weixin_34206899的博客
05-04 108
Flex(flexible box) 弹性布局 传统的布局解决方案，基于盒模型，通过 css中的display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 概念 任何容器都可以设为flex布局 采用flex布局的元素即为flex container，其子元素为容器成...
弹性盒子 flex-box
lc_web的博客
06-23 651
弹性盒子 弹性盒子是CSS3的一种新布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性
CSS3弹性盒布局
Carrie_zzz的博客
10-07 840
box-fiex兼容性的写法 -webkit-box-flex : ;（Safari浏览器，chrome浏览器) -moz-box-flex: ;（Firefox浏览器） <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>
面试必备：一文读懂DNS：网络知识扫盲
网络知识扫盲，一文搞懂DNS，是求职面试中不容忽视的基础考察内容。DNS（Domain Name System），即域名解析系统，是互联网通信的核心组成部分，它将人类易于记忆的域名转换为机器可理解的IP地址，使得我们在浏览器中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值