一定要码住的弹性布局---flex

最新推荐文章于 2024-08-08 00:28:50 发布
最新推荐文章于 2024-08-08 00:28:50 发布
阅读量269 收藏 1
点赞数 1
分类专栏： css 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49277509/article/details/116373552
版权

今天主要更新的内容就是弹性布局，前端最最主要的就是布局了，页面的还原度，这里不得不提到弹性布局，这种布局是目前比较流行的一种，下面跟随我的步伐去学习一下弹性布局吧👇👇👇

1.支持的浏览器
在这里插入图片描述

从上面可以看出，各个主流的浏览器都支持flex布局

2.弹性布局的属性
float, clear and vertical-align 在flex项目中不起作用

display: flex | inline-flex; (适用于父类容器元素上)

flex：将对象作为弹性伸缩盒显示。
inline-flex：将对象作为内联块级弹性伸缩盒显示。

  <style>
   .father {

            margin-top: 100px;
            background-color: pink;
            /* display: flex; */
            display: inline-flex;
        }

        .son {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>

在这里插入图片描述
在这里插入图片描述

从上面可以看出，父级不设置宽高，子级宽高已知的情况下：
display:flex;父级宽度100%，高度自适应；
display: inline-flex; 父级宽度高度自适应

flex-direction (适用于父类容器的元素上)

语法： flex-direction: row | row-reverse | column | column-reverse
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

  <style>
      * {
            margin: 0;
            padding: 0;
        }

        .father {

            margin-top: 100px;
            background-color: pink;
            display: flex;
            /* 默认 */
            /* flex-direction: row ; */
            flex-direction: column-reverse;
            /* 纵向排列 */
            /* flex-direction: column; */
        }

        .son {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son"></div>
        <div class="son"></div>
    </div>
</body>

纵向排列
在这里插入图片描述
横向倒叙
在这里插入图片描述
纵向倒叙
在这里插入图片描述

flex-wrap (适用于父类容器上)

语法：flex-wrap: nowrap | wrap | wrap-reverse
nowrap：当子元素溢出父容器时不换行 默认。
wrap：当子元素溢出父容器时自动换行。
wrap-reverse：反转 wrap 排列。

    <style>
      .father {
            width: 600px;
            margin-top: 100px;
            background-color: pink;
            display: flex;
            /* 不换行，此时子级宽度大于父级宽度，以父级宽度为准，
            子级宽度自适应 */
            /* flex-wrap: nowrap; */
               /* 换行 */
            /* flex-wrap: wrap; */
            /* 倒叙换行 */
            flex-wrap: wrap-reverse;
        }

        .son {
            width: 210px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">a</div>
        <div class="son">b</div>
        <div class="son">c</div>
    </div>

在这里插入图片描述
在这里插入图片描述

flex-flow (适用于父类容器上)

语法：flex-flow: <‘flex-direction’> || <‘flex-wrap’>
[ flex-direction ]：定义弹性盒子元素的排列方向。
[ flex-wrap ]：定义弹性盒子元素溢出父容器时是否换行。

flex-flow是一个复合属性，第一个值是flex-direction的属性，第二个值是flex-wrap的属性，这里只写一个简单的例子方便理解

   <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            margin-top: 100px;
            background-color: pink;
            width: 600px;
            display: flex;
             /* 复合属性：方向，是否换行 */
            flex-flow: column  wrap-reverse;
        }

        .son {
            width:200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">a</div>
        <div class="son">b</div>
        <div class="son">c</div>
    </div>
</body>

在这里插入图片描述
justify-content (适用于父类容器上)

语法：justify-content: flex-start | flex-end | center | space-between | space-around
flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于’flex-start’。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于’center’。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

  <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            margin-top: 100px;
            background-color: pink;
            display: flex;
            /* 默认 */
            /* justify-content: flex-start; */
            /* 向行结束位置对齐 */
            /* justify-content: flex-end; */
            /* 居中对齐 */
            /* justify-content: center; */
            /* 平均地分布在行里 */
            /* justify-content: space-between*/
            /* 平均地分布在行里，两端保留子元素与
            子
            元素之间间距大小的一半 */
            justify-content: space-around;
        }

        .son {
            width:200px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">a</div>
        <div class="son">b</div>
        <div class="son">c</div>
    </div>
</body>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

align-items (适用于父类容器上) ：属性定义项目在交叉轴上如何对齐。

语法：align-items: flex-start | flex-end | center | baseline | stretch
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴（纵轴）起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）结束位置的边界紧靠住父容器的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            width: 700px;
            height: 500px;
            margin-top: 10px;
            background-color: pink;
            display: flex;
            /* 交叉轴的起点对齐 */
            /* align-items: flex-start; */
            /* 交叉轴的终点对齐 */
            /* align-items: flex-end; */
            /* 交叉轴的中点对齐 */
            /* align-items: center; */
            /* /项目的第一行文字的基线对齐 */
            /* align-items: baseline; */
            /* 如果项目未设置高度或设为auto，
            将占满整个容器的高度。 */
            align-items: stretch;
        }

        .son1 {
            width: 100px;
            /* height: 100px; */
            border: 1px solid red;
            /* font-size: 20px; */
        }
        .son2{
            border: 1px solid red;
            width: 200px;
            /* height: 300px; */
            /* font-size: 60px; */

        }
        .son3{
            border: 1px solid red;
          width: 300px;
          /* height: 200px; */
          /* font-size: 100px; */

        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">a</div>
        <div class="son2">b</div>
        <div class="son3">c</div>
    </div>
</body>

交叉轴的起点对齐
在这里插入图片描述
交叉轴的终点对齐
在这里插入图片描述
交叉轴的中点对齐
在这里插入图片描述
项目的第一行文字的基线对齐
在这里插入图片描述
如果项目未设置高度或设为auto，将占满整个容器的高度。
在这里插入图片描述

align-content (适用于父类容器上)
属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch
flex-start：各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end：各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
center：各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
space-between：各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            margin-top: 10px;
            height: 500px;
            background-color: pink;
            display: flex;
            flex-wrap: wrap;
            /* 与交叉轴的起点对齐 */
            /* align-content: flex-start ;   */
            /* 与交叉轴的终点对齐 */
            /* align-content: flex-end ;   */
            /* 与交叉轴的中点对齐。 */
            /* align-content: center; */
       /* 与交叉轴两端对齐，轴线之间的间隔平均
         分布。 */
            /* align-content:space-between; */
            /* 每根轴线两侧的间隔都相等。所以，
        轴线之间的间隔比轴线与边框的间隔大一倍*/
            /* align-content:space-around; */
            /*默认 ：轴线占满整个交叉轴。 */
            align-content: stretch;




        }

        .son {
            width:200px;
            height: 100px;
            margin-right: 20px;
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">a</div>
        <div class="son">b</div>
        <div class="son">c</div>
        <div class="son">d</div>
        <div class="son">e</div>
        <div class="son">f</div>
        <div class="son">g</div>

    </div>

与交叉轴的起点对齐
在这里插入图片描述
与交叉轴的终点对齐
在这里插入图片描述
与交叉轴的中点对齐。
在这里插入图片描述
与交叉轴两端对齐，轴线之间的间隔平均分布。
在这里插入图片描述
每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
在这里插入图片描述
默认 轴线占满整个交叉轴。
在这里插入图片描述

order (适用于弹性盒模型容器子元素)

语法：order: integer（integer：用整数值来定义排列顺序，数值小的排在前面。可以为负值。）

  <style>
       .father{
           background-color: pink;
           display: flex;
       }
       .son{
           width: 200px;
           height: 100px;
           margin-top: 10px;
           margin-right: 20px;
           border: 1px solid red;
       }
       .son1{
           order: 5;
       }
       .son2{
           order: -1;
       }
       .son3{
           order: 3;
       }
       .son4{
           order:4;
       }
       .son5{
           order: 1;
       }
    </style>
</head>
<body>
    <div class="father">
        <div class="son son1">1:order是5</div>
        <div class="son son2">2:order是-1</div>
        <div class="son son3">3:order是3</div>
        <div class="son son4">4:order是4</div>
        <div class="son son5">5:order是1</div>
    </div>
</body>

在这里插入图片描述

flex-grow (适用于弹性盒模型容器子元素)

语法：flex-grow: number (default 0)
flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。本例中b,c两项都显式的定义了flex-grow，可以看到总共将剩余空间分成了4份，其中b占1份，c占3分，即1:3

 <title>flex-grow</title>
    <style>
        .father{
            background-color: pink;
            display: flex;  
            width: 600px;
        }
        .son{
            width:100px;
            height: 100px;
            border: 1px solid red;
        }
        .son3{
            flex-grow: 1;
        }
     </style>
 </head>
 <body>
     <div class="father">
         <div class="son son1">1</div>
         <div class="son son2">2</div>
         <div class="son son3">3</div>
         <div class="son son4">4</div>
         <div class="son son5">5</div>
     </div>
 </body>

在这里插入图片描述

flex-shrink (适用于弹性盒模型容器子元素)

语法：flex-shrink: number (default 1)
flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
本例中c显式的定义了flex-shrink，a,b没有显式定义，但将根据默认值1来计算，可以看到总共将剩余空间分成了5份，其中a占1份，b占1份，c占3分，即1:1:3
我们可以看到父容器定义为400px，子项被定义为200px，相加之后即为600px，超出父容器200px。那么这么超出的200px需要被a,b,c消化
按照以上定义a,b,c将按照1:1:3来分配200px，计算后即可得40px,40px,120px，换句话说，a,b,c各需要消化40px,40px,120px，那么就需要用原定义的宽度相减这个值，最后得出a为160px，b为160px，c为80px

<style>
        .father{
            background-color: pink;
            display: flex;  
            width:400px;
        }
        .son{
            width:200px;
            height: 100px;
            border: 1px solid red;
        }
        .son3{
            flex-shrink: 2;
        }
     </style>
 </head>
 <body>
     <div class="father">
         <div class="son son1">1</div>
         <div class="son son2">2</div>
         <div class="son son3">3</div>
     </div>
 </body>

在这里插入图片描述

flex-basis (适用于弹性盒模型容器子元素)

语法：flex-basis: length | auto (default auto)
auto：无特定宽度值，取决于其它属性值
length：用长度值来定义宽度。不允许负值
percentage：用百分比来定义宽度。不允许负值

// An highlighted block
var foo = 'bar';

flex (适用于弹性盒模型子元素)
复合属性。设置或检索伸缩盒对象的子元素如何分配空间。 如果缩写flex:1, 则其计算值为：1 1 0

语法：flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
none：none关键字的计算值为: 0 0 auto
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。

    <style>
        .father{
            background-color: pink;
            display: flex;  
            width:800px;
        }
        .son{
            width:100px;
            height: 100px;
            border: 1px solid red;
        }
        .son3{
            /* 指定宽度 */
            /* flex-basis: 600px; */
            /* 默认 */
            /* flex-basis: auto; */
            flex-basis: 50%;
        }
     </style>
</head>
<body>
    <div class="father">
        <div class="son son1">1</div>
        <div class="son son2">2</div>
        <div class="son son3">3</div>
        <div class="son son4">4</div>
        <div class="son son5">5</div>
    </div>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

align-self (适用于弹性盒模型子元素)：设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。

语法：align-self: auto | flex-start | flex-end | center | baseline | stretch
auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

  <style>
        .father{
            background-color: pink;
            display: flex;
            height: 200px;
        }
        .son{
            margin-right: 40px;
        }
        .son1{
            width: 50px;
            height: 50px;
            background-color: #f6f6f6;
            align-self: flex-end;
            font-size: 20px;
        }
        .son2{
            width: 30px;
            height: 40px;
            background-color:red ;
            align-self: center;
            font-size: 30px;
        }
        .son3{
            width: 40px;
            height: 40px;
            background-color:rgb(74, 248, 89) ;
            align-self: flex-start;
            font-size: 40px;
        }
        .son4{
            width:160px;
            height: 150px;
            font-size: 50px;
            background-color:rgb(56, 40, 196) ;
            align-self: baseline;
        }
        .son5{
            font-size: 60px;
            align-self: stretch;
            background-color:rgba(44, 196, 102, 0.397) ;
        }
        
        .son6{
            align-self: auto;
            width: 170px;
            height: 170px;
            font-size:70px;
            background-color:rgba(44, 196, 102, 0.397) ;
        }
        
    </style>
</head>
<body>
    <div class="father">
        <div class="son son1">son1</div>
        <div class="son son2">son2</div>
        <div class="son son3">son3</div>
        <div class="son son4">son4</div>
        <div class="son son5">son5</div>
        <div class="son son6">son6</div>

    </div>
    
</body>

在这里插入图片描述

以上就是弹性布局经常使用的属性了，欢迎纠错，补充评论

加倍_
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3弹性盒子（二）弹性子元素
weixin_45846139的博客
04-19 2074
之前说完弹性容器的属性，再来看看弹性子元素的属性。弹性盒子由两部分组成，设置好弹性容器之后，再将子元素设置好，一个完整的弹性盒子就写好了。要想写好子元素，就需要了解子元素的属性。 弹性盒子 弹性子元素属性： 1、order 控制弹性容器里子元素的顺序，数值小的排在前面，可以为负值 值为 ： 整数 2、flex-grow 设置弹性子元素的扩展比率 设置弹性子元素的扩展比率，不允许为负值...
斑码教育大前端课堂笔记-css第一天
11-24
Flexbox（弹性盒布局）是现代CSS布局的标准，适用于单行或单列的弹性容器和子元素的布局。通过设置`display: flex;`，我们可以轻松实现元素的对齐、排序和自适应大小。 十、Grid布局 Grid布局提供二维网格系统，...
【多层flex嵌套自适应布局，flex: 1失效】
apjcui的博客
08-04 1146
【多层flex嵌套自适应布局，flex: 1失效】
关于 flex 布局时，子元素宽度超出父元素问题及解决方案（问题）
weixin_60547084的博客
03-20 9979
这个是我在项目中遇到的一个bug，使用的 flex 布局，由于我动态的修改绿色盒子的显示与隐藏，导致两边盒子的挤压。先看效果图，大家可以看一下下面的样式，很明显左边和右边的盒子我是给的定宽，但是被挤压了。很明显，红色的盒子没有300px。
flex布局（弹性布局）学习笔记
Aiolimp的博客
08-25 345
flex布局（弹性布局）学习笔记 弹性容器： 设置了display：flex;这个元素为弹性容器，弹性容器中的子元素会按照弹性布局进行排列。 弹性子元素：设置了display:flex;元素的子容器即为弹性子元素，但不包括孙子元素。 flex容器属性： 1.display属性： display:flex 将对象作为弹性伸缩盒展示，相当于块级属性，有默认宽度100% display:inline-flex 将对象作为内联块级弹性伸缩盒展示，即行级元素，没有默认宽度 2.flex-direction:指
浅谈弹性布局
ganlubaba666的博客
12-10 1907
今天很悲伤 QAQ，我写了两个星期的项目孵化失败了，原因也很愚蠢，是因为我把css尺寸写死了，没有用到弹性布局。所以我特地学习了弹性布局的时候，在这里通过一些摘抄记录一下难点和疑惑，以供以后参阅。 什么是弹性布局？ 弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 ...
CSS3弹性盒子flex布局方式
xue_smail的博客
06-02 369
一、CSS3弹性盒子 CSS3 弹性盒子：是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的：提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 二、CSS3 弹性盒子内容 弹性盒子由弹性容器 和弹性子元素组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 ...
CSS知识点：弹性Flex布局
qq_53402777的博客
10-24 718
传统布局基于盒模型，依赖display属性+position属性+float属性，不利于特殊布局（垂直居中，分散布局等）的实现。
vue支付密码组件实现6位数字支付密码弹窗隐藏
08-10
flex-direction: column; align-items: center; } .input-digit { width: 30px; height: 30px; margin-right: 10px; text-align: center; } /* iOS 和 Android 的样式调整 */ input[type="password"]::-...
移动端项目，仿携程移动端（flex布局）.rar
11-07
在移动端项目开发中，"仿携程移动端（flex布局）.rar"是一个实例，它展示了如何利用现代前端技术来创建一个适应各种移动设备尺寸的页面。这个项目主要运用了HTML5、CSS3以及Flex布局，旨在提供类似携程移动端的用户...
login-form
03-07
- 为了确保表单在不同设备上都有良好的显示效果，可以使用媒体查询（`@media`）和弹性布局（Flexbox）或网格布局（CSS Grid）。 - `width`、`max-width`和`min-width`属性控制元素宽度，适应不同屏幕尺寸。 - `...
mini-project-landing-page
03-20
`来设置表单为弹性布局，或者`background-color: #F5F5F5;`来设置背景色。 4. **响应式设计**：考虑到现代网页需要适应不同设备的屏幕尺寸，CSS的媒体查询（@media queries）将被用来确保登陆页面在手机、平板电脑...
（转）flex布局换行后间隙问题
CaseyWei
10-14 8403
问题描述 今天遇到flex布局换行后产生间隙的问题，本来预期得到以下结果 pre.PNG 具体实现如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
flex 布局平均分布又能换行，子元素之间还要有空隙
热门推荐
visionke的博客
05-27 1万+
用flex-wrap: wrap;来换行，用justify-content:space-between;来平分， 在父元素末尾加上after伪元素，让其自动添补最后一个位置，高度设为0 便不影响后面的元素 举例我们需要3个元素为一行，并且平分布局 当元素不满足3个的的时候 刚好有九元素的时候 ...
嵌套flex下overflow失效
fkcaikengren
03-14 1000
嵌套flex下 overflow失效 在flex盒子A下嵌套另一个flex盒子B, B的高度是flex:1，让B的子元素高度是flex:1的且overflow:auto，但是这种情况下的overflow会失效！ 解决办法：解决overflow失效的关键代码是min-height: 0; 示例如下： 效果对比图： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> &lt
css 弹性布局
cxxbzy的博客
10-22 783
什么是弹性布局？ flex布局，是H5新出的布局方式，主要代替传统float浮动布局。 注意：布局要给父元素设置，子元素按照布局方式排列，他会使块级元素不独占一行。 特点：当没有给弹性布局设置换行时，子元素不会自动换行会在一行显示。 display: flex; 设置弹性布局 flex-direction:设置布局方向 ; row；默认的从左至右的顺序排列的，代...
flex 换行布局，最后一行不满时问题处理
bitor的博客
09-28 3029
flex 换行布局，最后一行不满时问题处理 如图（借用别人的）所时，flex-wrap: wrap; justify-content: space-between; 时造成的问题； 但是我们期望的是这个样，如下图所示 我在本站上也看到了很多的方法，但使用时限制很多，并不能完满解决我们的问题；他人的解决方案存在的问题或限制： 有的必须知道每行的元素个数或每个元素width 占比（一个意思） 有的大量的css 修改作 有的放弃 justify-content: space-between; 以上方案解决
Flex嵌套HTML框架处理心得
自由空间
10-30 6234
Flex嵌套HTML框架处理心得功能描述：在Flex中嵌套框架，并且进行数值传递 １、编辑Flex框架组件iFrame.mxml http://www.adobe.com/2006/mxml"    resize="callLater(moveIFrame)"    move="callLater(moveIFrame)">             
最新CSS3伪类和伪元素详解
最新发布
业精于勤荒于嬉，行成于思毁于随
08-08 515
以计数为基础的，默认情况下，n代表从0开始的数字，以1递增(1,2,3等等)，但是元素是从1开始的。表示单个的选择，分别是某类型元素第一个，父元素中子元素最后一个，某类型元素最后一个。将浏览器上下宽度小一点，必须有滚动条，则会发现页面跳转后，会自动滚动到目标位置。root伪类：给html一个较高的特殊度，设置html元素后不该被修改。nth-last-child与nth-last-of-type。not伪类：选择除了给定参数元素之外的所有元素。类似，不同的是从最后一个元素开始计数。
css flex 等比布局 flex-grow
01-18
以下是一个使用flex-grow属性实现等比布局的示例： ```html <div class="item item1">Item 1 <div class="item item2">Item 2 <div class="item item3">Item 3 ``` ```css .container { display: flex; } ....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值