弹性盒布局display：flex；

已于 2023-03-20 23:13:54 修改
阅读量119 收藏
点赞数
文章标签： css html css3
于 2023-03-20 23:07:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55822929/article/details/129678707
版权

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

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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
display: flex弹性布局
10-12
display: flex弹性布局
Flex布局的属性之 flex-direction属性
weixin_34205826的博客
06-29 2008
一、flex-direction 属性 　flex-direction属性控制主轴的方向，即项目的排列方向。 　格式： .class { 　　　　　　flex-direction: row | row-reverse | column | column-reverse; 　　　　} 　flex-direction属性有4个值： 值 说明 row 默认值是ro...
display：flex用法
qq_39692513的博客
05-29 1199
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以及flex-direction，justify-content，align-items
Zoey_J的博客
04-22 7830
若给一个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 6677
这是什么玩意儿？
HTML5基础加强css样式篇（伸缩容器属性：flex-direction， flex-wrap，flex-flow，align-items，align-content）（五十三）
余正源的博客
04-27 5372
1.justify-content 属性详见（五十二）2.flex-direction:row || row-reverse || column || column-reverse //设置主轴的方向row:默认：row 反向设置主轴方向：column :主轴方向设置为纵轴方向（纵轴的方向为原来横轴的正方向）；column-reverse:主轴方向设置为纵轴方向的反方向（纵轴的方向为原来横轴的正方...
display：flex布局语法
11-20
flex 弹性盒子布局语法，关于廖雪峰老师网站学习笔记的分享，
CSS3新增布局之: flex详解
11-20
flex布局（flex是flexible box的缩写）， 也称为弹性盒模型 。将属性和属性值（display:flex; ）写在哪个标签样式中，谁就是 容器；它的所有子元素自动成为容器成员，称为项目。 当一个元素的display 取值为flex，...
详解CSS中的display:flex||inline-flex属性|56375.pdf
12-12
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex示例代码 ...
AngularJS 实现弹性盒子布局的方法
11-22
最近在写一个简单的布局框架，其实功能大同小异。但目标要求是用尽量简单的代码，实现一些必用的功能。应用在一些要求加载速度快的场合。 CSS部分 .flex-row,.flex{ display: -webkit-flex;display: flex; flex-...
flex 布局
bangongzan0053的博客
05-03 235
flex入门 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。 容器的属性 flex-direction row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向...
display: flex自我理解
热门推荐
yang792508465的博客
04-18 1万+
我眼中的弹性盒子 display: flex意思是弹性布局，弹性布局简直不要太好用，今天就来和大家具体讲讲它的属性和用法吧。 flex的属性（以下五个属性语法都是加在父元素身上的。） 一 1. flex-direction: row; 布局的排列方向 （主轴排列方向） row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。 row-reverse 显示为行。但方向和row属性值是反的，在水平方向上为从右往左。 column 显示为列 方向为在垂直方向上从上到下 column-rever
Web开发——HTML&CSS
最新发布
一切皆是定数的博客
05-20 156
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
css超出部分省略（单行、多行，多种方法实现）
阿乐的博客
05-14 403
缺点:使用了私有属性。
实用css整理
qq_37004501的博客
05-17 375
一般用于特殊时期，网页变灰，只需要给body标签添加这行样式代码。给body标签设置这个属性样式，改变角度看看效果吧。
css: 动态设置网格线
1111111111
05-14 343
唯一的遗憾是，宽度和高度本来想设置为数字类型，通过input-number输入，然后在css里拼上‘px’，像下面这种写法，会报错，所以只能把px单位放在输入框里。上面的html和下面的css不在同一个vue文件里，虽然变量名不同，一个是formData，一个是designData，所指向的对象是相同的。注意：style里不要写lang="scss" 不然会一直报错。另外还有一个小小的问题，页面缩放的时候，网格线会消失。把网格颜色，宽高和透明度做成可配置项。
在学习uni-app过程中使用的css样式记录
qq_34080064的博客
05-20 556
​在学习uni-app过程中，记录下使用的css样式，持续更新。
CSS常用滤镜效果
不负光阴不负自己，不负被爱不负所爱 ​
05-13 343
CSS 提供了多种滤镜效果，可以通过filter属性应用于 HTML 元素。将图像转换为灰度图像。给图像应用色相旋转。值以度为单位。增加或减少图像的饱和度。增加或减少图像的亮度。增加或减少图像的对比度。反转图像的颜色。给图像应用模糊效果。
css如何实现边框模糊的效果
rolling_kitten的博客
05-14 678
其实并不难，用属性 filter: blur(数字px); 即可。效果如下： 图上的圆形内有色彩的渐变，同样也是用filter: blur(数字px); 实现的，代码如下：、
弹性布局display:flex
05-02
相较于传统的盒模型(display:block/inline-block)布局，弹性布局有以下优点： 1. 自适应性强：弹性布局可以实现多种设备上的自适应布局，可以根据屏幕大小、设备类型等进行自动调整。 2. 空间利用率高：弹性布局...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值