CSS Flex 弹性布局

最新推荐文章于 2024-04-22 16:54:47 发布
最新推荐文章于 2024-04-22 16:54:47 发布
阅读量202 收藏 1
点赞数 2
分类专栏： CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/datouxiang/article/details/118162598
版权

Flex 布局 = 弹性布局 = 伸缩布局

采用Flex布局的元素，称为Flex容器，它的所有子元素称为容器成员，称为Flex项目

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

常见父盒子属性：

1.flex-direction:设置主轴方向

2.justify-content:设置主轴上字元素的排列方式

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

4.align-items:设置侧轴上的字元素排列方式（单行）

5.align-content:设置侧轴上的子元素的排列方式（多行）

6.flex-flow:复合属性，等于同时设置了flex-direction和flex-wrap

常见子盒子属性：

1.flex :1 表示子项目所占份数

2.align-self:控制子项自己在侧轴的排列方式

具体如下：

1.flex-direction:设置主轴方向

flex布局中 ，分为主轴和侧轴，主轴默认为x轴，水平向右，侧轴为y轴，水平向下，

flex-direction：row  从左到右（默认值）  

flex-direction： row-reverse 从右到左

flex-direction： column  从上到下

flex-direction：  column-reverse 从下到上

flex-direction：row  从左到右（默认值）  

 .father {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            /* 默认的主轴为x轴 */
            flex-direction: row;
        }
        
.son {
            width: 150px;
            height: 100px;
            background-color: rgb(153, 230, 122);
            /* margin-left: 10px; */
 }

 <div class="father">
        <span class="son">1</span>
        <span class="son">2</span>
        <span class="son">3</span>
        <span class="son">4</span>
        <span class="son">5</span>
        <span class="son">6</span>
 </div>

   flex-direction： row-reverse 从右到左

 flex-direction: row-reverse;

    flex-direction： column  从上到下

flex-direction: column;

flex-direction：  column-reverse 从下到上

 flex-direction: column-reverse;

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

注意：使用前确认好主轴是哪个

justify-content: flex-start   如果主轴是x轴，则从左到右 (默认值)

justify-content: flex-end  从尾部开始排列

justify-content: center  在主轴居中对齐

justify-content: space-around  平方剩余空间

justify-content: space-between 先两边贴边，再平分剩余空间 

justify-content: flex-start   如果主轴是x轴，则从左到右 (默认值)

.father {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            /* 默认的主轴为x轴 */
            flex-direction: row;
            justify-content: flex-start;
        }
.son   {
            width: 150px;
            height: 100px;
            background-color: rgb(153, 230, 122);
            /* margin-left: 10px; */
        }
<div class="father">
        <span class="son">1</span>
        <span class="son">2</span>
        <span class="son">3</span>
</div>

justify-content: flex-end  从尾部开始排列

 flex-direction: row;
 justify-content: flex-end;

justify-content: center  在主轴居中对齐

 flex-direction: row;
 justify-content: center;

justify-content: space-around  平方剩余空间

 flex-direction: row;
 justify-content: space-between;

justify-content: space-between 先两边贴边，再平分剩余空间 

flex-direction: row;
justify-content: space-around;

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

flex-wrap: nowrap  默认不换行

flex-wrap: wrap  换行

flex-wrap: nowrap  默认不换行，如果装不开，会缩小子元素的宽度，放在父元素里

.father {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            /* 默认的主轴为x轴 */
            flex-direction: row;
            justify-content: space-around;
            flex-wrap: nowrap;
        }
.son {
            width: 150px;
            height: 100px;
            background-color: rgb(153, 230, 122);
            margin: 10px;
        }
  <div class="father">
        <span class="son">1</span>
        <span class="son">2</span>
        <span class="son">3</span>
        <span class="son">4</span>
        <span class="son">5</span>
        <span class="son">6</span>
        <span class="son">7</span>
        <span class="son">8</span>
    </div>

flex-wrap: wrap  换行

 .father {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            /* 默认的主轴为x轴 */
            flex-direction: row;
            flex-wrap: wrap;
        }

4.align-items:设置侧轴上的字元素排列方式（单行）

align-items:flex-start   从上到下

align-items:flex-end 从下到上

align-items:center 垂直居中

stretch:拉伸   （默认值）

align-items:center 侧轴垂直居中

 .father {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            /* 默认的主轴为x轴 */
            flex-direction: row;
            /* 侧轴居中 */
            align-items: center;
        }
 .son {
            width: 150px;
            height: 100px;
            background-color: rgb(153, 230, 122);
            margin: 10px;
        }
  <div class="father">
        <span class="son">1</span>
        <span class="son">2</span>
        <span class="son">3</span>
    </div>

5.align-content:设置侧轴上的子元素的排列方式（多行）

只能用于出现换行情况（多行） 在单行情况下是没有效果的

align-content: flex-start   从侧轴的头部开始排列(默认值)

align-content: flex-end  从侧轴的尾部开始排列

align-content: center  在侧轴轴居中对齐

align-content: space-around  子项在侧轴平方剩余空间

align-content:space-between 子项在侧轴先两边贴边，再平分剩余空间 

align-content:stretch 设置子项元素高度平分父元素高度

6.flex-flow:复合属性，等于同时设置了flex-direction和flex-wrap

  /* flex-direction: row;
    flex-wrap: wrap; */
   flex-flow: column wrap;

flex-flow: column wrap;   === flex-direction: row;  +  flex-wrap: wrap;

给子项目设置：

1.flex :1 表示子项目所占份数

.father {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            /* flex-direction: row;
            flex-wrap: wrap; */
            /* flex-flow: column wrap; */
            /* 侧轴居中 */
            align-items: center;
        }
        
        .son1,
        .son2,
        .son3 {
            width: 150px;
            height: 100px;
            background-color: rgb(153, 230, 122);
            margin: 10px;
        }
        
        .father .son1,
        .father .son3 {
            flex: 1;
        }
        
        .father .son2 {
            flex: 3;
        }

  <div class="father">
        <span class="son1">1</span>
        <span class="son2">2</span>
        <span class="son3">3</span>
    </div>

2.align-self:控制子项自己在侧轴的排列方式

.father {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
        
        .son1,
        .son2,
        .son3 {
            width: 150px;
            height: 100px;
            background-color: rgb(153, 230, 122);
            margin: 10px;
        }
        
        .father .son1,
        .father .son3 {
            flex: 1;
        }
        
        .father .son2 {
            flex: 3;
            align-self: flex-end;
        }
  <div class="father">
        <span class="son1">1</span>
        <span class="son2">2</span>
        <span class="son3">3</span>
    </div>

3.order:定义项目的排列顺序，数值越小，排列越靠前，默认值为0

4,flex-order：定义项目的放大比例，默认为0

5.flex-shrink:定义了项目的缩小比例，默认为1 ，当空间不足是，项目将缩小，如有一个项目的flex-shrink设置为0，其他项目为1，当空间不足时，前者不缩小。

6.flex-basis:定义了项目占主轴的空间，浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如100px），则项目将占据固定空间

7.flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.son{
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

3-7 参考 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

datouxiang
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css flex 弹性布局详解
12-30
案例基础布局 html <li class=item></li> <li class=item></li> <li class=item></li> <li class=item></li> css .box{ display: -webkit-flex; display: flex; } .item{ width: 200px;
响应式布局--flex学习
蹦哒哒的王小哲
07-07 4356
flex 是css3 中一种新的布局模式，可以简单、完整、响应式地实现各种页面布局，非常适合移动端页面开发。
前端开发最详细、最易懂的Flex弹性布局（含案例）
管乐明的博客
04-13 1615
Flex弹性布局 1、flex发展历史 2009年W3C 提出概念，但是官方没有flex这个词。当时使用display:box;表示弹性布局 2011年浏览器厂商决定使用flexbox，来形容它的布局特点 2015年W3C正式将其修改为flexbox布局 2016年5月官方正式公布最新的稳定的flex布局规范标准，各大浏览器的支持越来越稳定 2、flex定义 Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 作用 它能够更加高效方便的控制元素的对齐、排
解决flex-direction: column 之后元素宽度自动变为100%
最新发布
weixin_44705979的博客
04-22 358
当我们设置父元素flex-direction为column后，他的子元素如果我们没有设置具体宽度（可能我们希望子元素宽度由内容撑开），这时就会发现，所有的子元素宽度默认是100%了。我们给对应子元素的align-self设置除auto和stretch之外的值就行。
flex布局
nick665544的博客
09-27 715
图例中主轴方向是从左到右，起始位置是容器的左边线，可以看到项目是左边对齐的。不同的是，between 是在项目之间，而 evenly 是在轴的最左边和最右边也同样会有空间分配。：项目在主轴方向上，以主轴结束的位置对齐。, 自动检测尺寸，如果项目有设置尺寸，则取项目设置的值，否则根据项目内容计算出尺寸。：项目在主轴方向上，两端对齐，然后项目中间间隔是相等的。：在主轴方向上，剩余的空间被平均的分配到每个项目的两侧。可以看到，放大的比例跟数值的大小无关，跟数值的比例有关。剩余的空间平均的分配在每个项目之间。
[css] flex 子元素自动撑开父元素宽度
qq_14993591的博客
11-03 2639
这样，子元素将会垂直排列在一列内，并自动撑开父元素的宽度。同样地，如果子元素的高度总和超过了父元素的高度，则子元素会被压缩，以适应父元素的高度。这样，子元素将会水平排列在一行内，并自动撑开父元素的宽度。如果子元素的宽度总和超过了父元素的宽度，则子元素会被压缩，以适应父元素的宽度。对于水平排列的情况，我们可以设置父元素的。对于垂直排列的情况，我们可以设置父元素的。
flex布局中 子元素宽度超出父元素导致样式问题
热门推荐
Dj19983160703的博客
06-27 1万+
近段时间，由于公司工作安排，一直没有时间更新博客，今天在写页面的时候，遇到了一些问题，做一下记录，话不多说开始。 在现在的前端样式开发中，相信大家已经对flex布局不陌生了吧，在页面布局中，所谓方便快捷，但是在开发中，我遇到一个问题： 就是在一个设置了 flex:1 的容器中，如果文字很长，这时候文字就会超出容器，而不是呆在设置好的动态剩余的空间中。由于实际项目的比较复杂，不好拿出来说，这里就把问题简化描述如下： 界面代码 小程序 css： 使用的ui框架中的样式，设置不得换行，...
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
flex弹性布局的理解。
06-15
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
关于 flex 布局时，子元素宽度超出父元素问题及解决方案（问题）
weixin_60547084的博客
03-20 8197
这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压。先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了。很明显，红色的盒子没有300px。
web前端入门到实战：基于flex-flow:column, 实现"商城分类页"充满屏幕高度
web前端开发教程htmlcssjs
12-03 1136
如何让"商城分类页"在数据不多的情况下充满屏幕高度. 第一次回答(calc) 相信大家的第一反应就是calc(100vh - 头高度), 我也是, 然后写了个demo 第二次回答(flex-flow:column) 但是人家说头高度是padding撑起的没有具体高度, 好吧看来只能用flex-flow:column了. 简单说下flex-flow:column, 默认flex都是x轴布局, 声...
flex布局一些常用属性
m0_44946030的博客
11-21 523
目录一、父盒子常设置的属性1.设置display:flex2.设置主轴flex-direction3.设置主轴内元素的排列格式：justify-content4.元素在一行上摆不开flex-wrap5.设置侧轴元素的排列方式（适合单行元素的情况）---设置盒子在水平居中，并且侧轴居中；align-items6.设置侧轴上子元素的排列方式（多行）align-content7.flex-direction与flex-wrap可以用一个属性同时表示flex-flow flex-flow:column wrap二、
html+css实战78-显示模式-块
geyaoisnice的博客
06-08 308
html
2022-11 CSS：flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中
weixin_49752665的博客
11-25 1713
如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第三行标签盒子也设置flex布局。如上图，父元素左右flex布局，右侧子元素flex布局且未设置宽度的状态下，对右侧子元素的第一行也设置flex布局。再对第一行公司名称设置flex：1，实现不设置文字宽度的超出隐藏。另：以上两种情况，右侧盒子无需设置flex：1。设置最小高度是为了，当第三行标签不存在的时候，右侧盒子高度会小于图片高度，由于父元素设置了aline-items：center，右侧盒子会居中。
flex布局，子元素撑开父元素
大兵的猫
04-03 9071
1.将父元素设置为display:flex时，子元素不设高度时（宽度需要设置）会默认撑开满父元素高度： 2.经典两栏布局 如果child1有子元素的话，并且子元素宽度过大，会撑开child1，将child2的宽度挤压，如下： 解决办法将child1的宽度设置为：width:0; ...
flex 容器属性详细介绍
前端开发工程师
09-03 881
flex各属性详细介绍，各属性的作用和最终呈现出的效果
css列表示例&flex布局子元素超出父容器宽度问题
pscool的博客
02-28 2038
* white-space属性为nowrap时，不会因为超出容器宽度而发生换行 */
Flex 布局详解（附思维导图）
萌宅鹿的技术小屋
07-01 946
Flex 布局简介 详细的知识点：【重识 HTML + CSS】知识点目录 简介 flex 布局（Flexible 布局，弹性布局）是在小程序开发中经常使用的布局 官方文档： https://www.w3.org/TR/css-flexbox-1/ https://www.w3.org/TR/css-align-3/ 开启了 flex 布局的元素叫 flex container flex container 里面的直接子元素叫做 flex items 设置 display 属性为 flex 或
css flex弹性布局display flex
11-24
CSS3 引入了弹性盒布局，又称为 Flex 布局。Flex 布局是一种更加高效的布局方式，可以方便地实现各种复杂的布局效果。其中，`display: flex` 是将一个容器指定为 Flex 布局的方式之一。 下面是一个简单的例子，展示如何使用 `display: flex` 将一个容器指定为 Flex 布局： ```html <div class="box"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div> ``` ```css .box { display: flex; } .item { width: 200px; } ``` 上面的代码中，我们将一个 `div` 容器指定为 Flex 布局，并将其内部的子元素（即 `class="item"` 的 `div` 元素）的宽度设置为 200 像素。这样，子元素会自动排列在一行中，并且会自动填满整个容器的宽度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值