弹性盒布局display：flex；

已于 2023-03-20 23:13:54 修改
阅读量156 收藏
点赞数
文章标签： css html css3
于 2023-03-20 23:07:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55822929/article/details/129678707
版权
文章详细介绍了CSS中的弹性盒子模型，包括如何声明弹性盒子，设置主轴和交叉轴的排列方式，调整主轴方向，以及控制项目在交叉轴的排列和多行排列方式。此外，还提到了控制项目是否换行的属性以及项目自身的放大和缩小属性，提供了代码示例以帮助理解。
摘要由CSDN通过智能技术生成

写在容器（父元素）身上的属性

1、声明弹性盒子

display: flex;

display:inline-flex;

2、设置在主轴的排列方式 写在父元素

justify-content:flex-start; 左上角开始 默认值

justify-content:flex-end; 右上角开始

justify-content:center; 居中显示

justify-content:space-between; 两端对齐，中间自动分配

justify-content:space-around; 每个项目左右间隔一致

justify-content:space-evenly; 每个项目的间隔一样

3、设置主轴方向（主轴默认是横轴）写在父元素

flex-direction:row; 横轴（从前往后）

flex-direction:row-reverse; 横轴（从后往前）

flex-direction:column; 竖轴（从上到下）

flex-direction:column-reverse; 竖轴（从下到上）

4、交叉轴的排列方式(写在父元素上)

align-items:stretch; 默认值 高度铺满父元素

align-items：flex-start 最顶部

align-items：flex-end 最底部

align-items：center 垂直居中显示

align-items：baseline 基线对齐

5、多行排列方式(写在父元素上)

align-content:flex-start;

align-content:flex-end;

align-content:center;

align-content:space-around;

align-content:space-between;

写在容器（父元素）身上的属性

1、声明弹性盒子

display: flex;

display:inline-flex;

2、设置在主轴的排列方式（写在父元素上）

justify-content:flex-start; 左上角开始 默认值

justify-content:flex-end; 右上角开始

justify-content:center; 居中显示

justify-content:space-between; 两端对齐，中间自动分配

justify-content:space-around; 每个项目左右间隔一致

justify-content:space-evenly; 每个项目的间隔一样

3、设置主轴方向（主轴默认是横轴）写在父元素

flex-direction:row; 横轴（从前往后）

flex-direction:row-reverse; 横轴（从后往前）

flex-direction:column; 竖轴（从上到下）

flex-direction:column-reverse; 竖轴（从下到上）

4、交叉轴的排列方式(写在父元素上)

align-items:stretch; 默认值 高度铺满父元素

align-items：flex-start 最顶部

align-items：flex-end 最底部

align-items：center 垂直居中显示

align-items：baseline 基线对齐

5、多行排列方式

align-content:flex-start;

align-content:flex-end;

align-content:center;

align-content:space-around;

align-content:space-between;

6、一行排不下 是否换行（默认是收缩显示 不换行）

flex-wrap：nowrap（不换行 默认值）

flex-wrap：wrap 换行

代码示例：

可以控制单一变量验证以上效果，多行排列方式的没写，多加几个parent下的子div就能实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left div {
            width: 100px;
            height: 100px;
            background: palevioletred;
            /* margin: 10px; */
        }

        .right div {
            width: 100px;
            height: 100px;
            background: #2f7dae;
            margin: 10px;
        }

        .center div { 
            width: 100px;
            height: 100px;
            background: #2ecd50;
            margin: 10px;
        }

        .parent {
            /* 弹性盒布局 */
            display: flex;
            height: 700px;

            /* 左上角开始  默认值 */
            /* justify-content:flex-start;   */

            /* 右上角开始 */
            /* justify-content:flex-end;  */

            /*   居中显示 */
            justify-content: center;


            /* 两端对齐，中间自动分配 */
            /* justify-content:space-between;  */

            /* 每个项目左右间隔一致 */
            /* justify-content:space-around;  */

            /* 每个项目的间隔一样 */
            /* justify-content:space-evenly;   */

            /*   横轴（从前往后） */
            /* flex-direction:row;     */

            /* 横轴（从后往前） */
            /* flex-direction:row-reverse;   */

            /* 竖轴（从上到下） */
            /* flex-direction:column;    */

            /*竖轴（从下到上）  */
            /* flex-direction:column-reverse;  */



            /* 默认值  高度铺满父元素 */
            /* align-items:stretch;      */

            /* 最顶部 */
            /* align-items:flex-start  ;  */

            /* 最底部 */
            /* align-items:flex-end;  */

            /*垂直居中显示   */
            /* align-items:center  ;   */

            /*   基线对齐 */
            /* align-items:baseline ;   */

            /* 多行排列方式   即轴线不止一条，可换行，要每个元素都铺满时使用align-content*/
            align-content:stretch;
            /* align-content:  1. stretch 沿着交叉轴方向自动进行拉升到最大（默认值）。 
            2. center 沿着交叉轴方向 居中 对齐。 
            3. flex-start 沿着交叉轴方向 起点 对齐。 
            4. flex-end 沿着交叉轴方向 结尾 对齐。
            5. space-between 沿着交叉轴方向 间隔 对齐，头尾没有间距。 
            6. space-around 沿着交叉轴方向 间隔 对齐，头尾有间距。 */
        }

        .left {
              /* 占一份 */
              flex: 1;
            width: 400px;
            background: #f91010;
        }
        .right{
            /* 占一份 */
            flex: 1;
            width: 400px;
            /* height: 500px; */
            background: #cbec48;

        }
        .center{
             /* 占两份 */
            flex: 2;
            width: 400px;
            /* height: 500px; */
            background: #ee2ebe;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="left">
            <div class="child">1</div>
            <div class="child">2</div>
            <div class="child">3</div>
            <div class="child">4</div>
        </div>
        <div class="center">
            <div class="child">5</div>
            <div class="child">6</div>
            <div class="child">7</div>
        </div>
        <div class="right">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </div>

</body>

</html>

写在项目身上（子元素）属性

1、定义项目的顺序

order： 2; 数字越大 就越靠后

2、设置单个项目在交叉轴的排列（和上面多行排列同理，就写进示例里了）

align-self:flex-start;

align-self:flex-end;

align-self:center;

3、项目放大 (子元素总宽小于父元素时放大)

flex-grow：1； 数字是份数 默认值0

4、项目的缩小（子元素总宽大于父元素时缩小）

flex-shrink：1； 默认值是1（收缩） 0 不收缩

小憨包267
关注
超详细！弹性盒子(display:flex)
weixin_56334307的博客
05-17 240
一般来说我们在css中用到的display大多数都接block(块级元素)、inline-block(行内块元素)、inline(行内元素)，这些在我们所平时需要的大部分地方都很好使，但是在某些地方会具有一定的局限性，让我们很难调样式，那么弹性盒子(弹性布局)就有可能会很好的帮助到你。flex常用版结束，现在是容器超好用之极端版，接下来的这些东西正常使用当然都没问题，但是如果出现父级的宽/高小于子级的宽/高，那又会出现什么情况呢，上代码。默认的flex-grow的值都为0，也就是不允许放大。
Web前端基础——弹性布局display:flex
weixin_56182955的博客
04-03 877
display：元素显示的方式 display的取值： display:none 不生成盒子 display:inline 行盒 多个行盒 标签可在一行显示 display:block 块盒 块盒元素独占一行 display:其他 例如：flex Flex 容器：父元素 项目：子元素 主轴：X轴（默认） 交叉轴：y轴（默认） display不具有继承性 display：flex； 添加flex的标签就是容器，子元素就是项目 功能： 1.所有的项目默认情况在
display: flex; Flex布局的详细介绍
weixin_46399753的博客
03-13 1103
前言 display：flex Flex布局在页面布局中应用的非常广泛，它能轻易的实现某些效果，但相对来说属性概念较多，想要掌握Flex布局并在项目中灵活运用也不是那么容易，在此我就来总结一下Flex布局的常用属性概念和用法，希望对你学习掌握有帮助。 一、什么是Flex布局？ Flex布局是2009年W3C提出了一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持...
flex弹性盒、display:flex、 flex:1
CIA的博客
08-08 157
父元素 形成弹性盒 display:flex; 子元素在主轴方向的位置 justify-content: flex-start 主轴起点，默认值 flex-end 主轴终点 center 主轴中心 space-between 主轴两端对齐 space-around 主轴中间留白是两端2倍 space-evenly 主轴留白平均 子元素在交叉轴方向的位置 align-items flex-start 交叉轴起点 flex-end 交叉轴终点 center 交
display：flex；布局
weixin_51109349的博客
03-22 2441
菜鸟教程display：flex；布局 例子原文 菜鸟教程讲解的已经很详细了，（点击上方链接），这里总结一些布局例子； 例子一：垂直居中布局 display: flex; justify-content: center; align-items: center; 例二：水平横向平分 display: flex;(父元素) flex:1;（子元素等分空间） HTML代码： <ul> <li>音乐</li> <li>影视</li&gt
css flex:1；详解，配合demo效果解答
最新发布
小漠007的专栏
09-07 4448
给设置了display：flex的子组件设置了flex：1；就能让他填满整个容器，如果有多个就平均flex：1；是另外三个样式属性的简写，等同我们就针对上面3个属性结合代码来进行讲解。
解析flex属性：flex：1究竟是什么
m0_55613022的博客
03-10 1480
实现页面中的footer保持在页面底部功能，有一个非常简单的方法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s
弹性盒子布局（display:flex）
m0_46420078的博客
10-22 855
Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式： 在不同方向排列元素 重新排列元素的显示顺序 更改元素的对齐方式 动态地将元素装入容器
display: flex弹性布局
10-12
display: flex弹性布局
flex布局中 flex:1和flex:auto的区别
pipijinlun的博客
02-24 87
首先 flex 是复合属性 是添加给子元素的
CSS3【display: flex；】与【flex-direction: 主轴方向；】的使用
卡尔特斯
04-27 1149
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pad
css display:flex 属性
weixin_30652271的博客
01-21 926
一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和ve...
Flex布局的属性之 flex-direction属性
weixin_34205826的博客
06-29 2076
一、flex-direction 属性 　flex-direction属性控制主轴的方向，即项目的排列方向。 　格式： .class { 　　　　　　flex-direction: row | row-reverse | column | column-reverse; 　　　　} 　flex-direction属性有4个值： 值 说明 row 默认值是ro...
display：flex用法
qq_39692513的博客
05-29 1253
flex属性： display:flex flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; justify-content: flex-start | flex-end | center | space-betw...
前端布局神器display:flex
robinhunan的博客
01-26 3037
近几年，CSS领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox，或者说是弹性盒子布局模块（Flexible Box Layout Module）是这些新布局工具中的第一个，接着是CSS网格布局模块（CSS Grid Layout Module）。我们会在本文给出一个易于理解的flexbox入门介绍。
display: flex以及flex-direction，justify-content，align-items
Zoey_J的博客
04-22 8639
若给一个div设置display：flex；这个div就可以成为flex容器，在flex容器中用flex-direction，justify-content，align-items等属性对子div进行布局是十分方便的。 flex-direction · flex-direction: row; (默认) div是块级元素，默认一个div独占一行，可以通过在父级div（必须是flex容器）中设置fl...
display:flex属性
wangshuaibinggg的博客
10-07 6891
这是什么玩意儿？
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 15万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
flex实现div左上角、中间、左下角布局css
syx_12的博客
08-17 4565
这部分需要提前理解flex布局的使用哦~。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
弹性布局display:flex
05-02
相较于传统的盒模型(display:block/inline-block)布局，弹性布局有以下优点： 1. 自适应性强：弹性布局可以实现多种设备上的自适应布局，可以根据屏幕大小、设备类型等进行自动调整。 2. 空间利用率高：弹性布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值