弹性盒布局_弹性盒布局左右各占一半 - CSDN
精华内容
参与话题
  • flexbox 弹性盒布局和布局原理

    万次阅读 2015-05-03 14:46:11
    flexbox 弹性盒布局和布局原理 最近开始做H5,发现flexbox用的超级广泛,找到了这么一篇文章,https://css-tricks.com/snippets/css/a-guide-to-flexbox/,认为讲的还不错,加上自己的一些测试和理解,就有了这一篇...

    flexbox 弹性盒布局和布局原理

    最近开始做H5,发现flexbox用的超级广泛,找到了这么一篇文章,https://css-tricks.com/snippets/css/a-guide-to-flexbox/,认为讲的还不错,加上自己的一些测试和理解,就有了这一篇笔记。

    新版的flexbox规范分两部分:一部分是container,一部分是 items。
    flexbox是一整套布局规范,包含了多个css属性,所以学习起来比`float: left;` 这样简单的布局要复杂很多。

    基本原理


    容器上有 主轴和纵轴的概念,默认主轴(main-axis)是横向,从左到右,纵轴是竖向,从上到下。其中所有的孩子的布局都会受到这两个轴的影响。后面会讲到,有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的。

    div上设置 `display: flex` 或者 `display: inline-flex` 来变成一个flex容器。然后给其中的每一个孩子设置 `flex: [number]` 来让他们按比例分配容器的宽度。
    比如三个item分别设置了 `flex: 1` `flex: 2` `flex: 1` 则他们是按照 1-2-1 的比例来分配宽度的。

    如果有item没有设置 `flex` 而是设置了宽度,比如 `width: 100px` 那么它的宽度就不受flex容器的影响,但是其他的设置了 `flex: [number]` 的容器会按比例平分剩下的部分。即使通过 `width: 100px` 的方式定死宽度,除了和 flex: 1 的宽度计算方式不同之外,其他并没有不同。
    其实应该说,如果一个孩子没有通过 flex: 1的方式来定义宽度,那么会根据非flex的方式来优先计算它的宽度,然后其他的声明了flex的孩子再按比例分配剩下的宽度。
    如下图所示,其中只有第一个孩子声明了 `flex:1` ,后面的都没有申明宽度,那么在flexbox容器中,后面的7个孩子都是由他们中的文字撑开的宽度,剩余的宽度全部分配给第一个孩子。


    后面还会仔细讲 `flex: 1` 定义孩子宽度的细节。


    container


    display
    `display: flex` 或者 `display: inline-flex` 来声明一个flexbox容器

    flex-direction


    items的排列方向,其实就是改变了上面所说的 主轴方向,所以这个属性会其他属性产生影响,因为整个flexbox的布局都是由主轴和纵轴决定的。

    row: 从左到右
    row-reverse: 从右到左
    colum: 从上到下
    colum-reverse: 从下到上

    下面分别是这四个值的结果


    flex-wrap
    当内容超出之后是否折行。

    nowrap:不换行,而是通过收缩每一个孩子的宽度来挤在一行。
    wrap: 换行。
    wrap-inverse: 换行,但是折行方向相反,(比如默认是折到下一行,但是这个属性会导致折到上一行)。

    如下图所示,分别是上述的三个值的效果,其中每一个孩子宽度为 40px,8个孩子已经超出了容器的 200px宽度。


    flex-flow
    flex-direction 和 flex-wrap 的组合写法。

    justify-content
    不知道如何准确翻译 justify 这个词。它的作用是定义了如何分配剩余的空白区域。

    flex-start:主轴方向
    flex-end: 主轴反方向
    center: 挤在中间
    space-between: 中间有空白。
    space-around: 中间和两边都有空白。其中两侧的空白是中间的一半宽度,可以理解为每个孩子两侧都有相同宽度的空白,并且空白不合并。

    上面说过,flex-direction 会改变主轴方向,下面我们看看 flex-direction 为默认情况下(从左到右)这五个不同值的区别:

    发现一个bug,在chrome下,在调试器下直接切换space-between  space-around 是不生效的。
    然后我们设置一下 `flex-direction: column`,会发现他们的主轴已经变成从到上下了:



    align-items
    孩子的对齐方式,这个比较好理解。就是孩子的对齐方式。
    注意,这里的“对齐”指的是纵轴上的对齐方式,所以,这个属性也是受 `flex-direction` 影响的。

    比如我有一个高度为100 px的容器,那么默认情况下,是scratch,就是在纵轴上填满容器。

    如上图所示,只定义了容器高度,默认情况下孩子的高度就会填满容器。
    如果我改成`align-items: flexstart`  就会是这样


    align-items 所有属性值如下:
    flex-start: 纵轴开始
    flex-end: 纵轴结束
    center: 纵轴居中
    baseline: 纵轴的baseline
    scratch: 填满容器。

    align-content
    当有多行内容的时候,这个属性决定了如何对多行内容进行对齐。
    注意,上面的每一个属性都是以每一个item为单位进行布局,而这个属性是以一行为单位进行布局。感觉这个属性应该叫 align-lines 比较合适。
    如果只有一行的话,这个属性是不生效的,所以一定要配合 `flex-wrap: wrap` 来使用。




    items


    order
    很简单,排列顺序,没什么好讲的。

    flex-grow
    定义了主轴上,孩子分配剩余空白区域的比例。
    比如现在有三个孩子,宽度是 40px,并且`margin: 2px`,容器宽度 200px,那么默认情况下,有 `(200-44)/3=68` 空白的宽度。

    如果你给每个孩子都定义了 `flex-grow: 1`,那么他们平分剩余的空白区域,就是这样:


    这时候,如果我给第二个孩子定义 `flex-grow: 2`,那么它的宽度是怎么计算的?
    其实就是把 68px 的空白按照`1:1:2` 的比例分配给他们,也就是 `17:17:34` 的大小来分配,所以三个孩子的宽度分别为 `57,57,74`:


    如果你给一个孩子设置为 `flex-grow: 0` 那么它不会参与剩余空白的分配。

    flex-shrink
    如果孩子的总宽度超过了容器宽度(主轴),那么这个属性定义了如何把超过的那部分平分到每个孩子身上,然他们按比例来缩小一定的宽度从而可以在容器中装得下。

    假设我们现在有一个容器,宽度为 `200px`,有三个孩子宽度为 `100px`,并且每个海泽有 `margin: 2px`,那么三个孩子总宽度 `(100+2*2)*3 = 312px` ,超过了 112px。
    所以我们从这三个孩子身上砍下 `112px` 宽度,以让他们能装进容器中。
    默认情况下,是 按 `1:1:1` 的比例来砍,也就是每个孩子各砍下 “112/3=37.3“,所以默认每个孩子宽度是 100-37.3=62.7。
    那么现在我们定义第二个孩子 `flex-shrink: 2`,其他两个为 1,那么他们会把 `112px` 的宽度按 `1:2:1` 来平分。于是第二个孩子宽度为 `100-(112/4*2)=44px` 宽度,另外两个为`100-(112/4*1)=72px`:


    flex-basis
    在分配空白之前,孩子的宽度,默认是 `auto`,也就是孩子本身的宽度,如果你定义了 `flex-basis: 50px;` ,那么它就会覆盖掉孩子的宽度。

    flex
    他是 flex-grow, flex-shrink, flex-basis三个属性的快捷方式。默认是 0, 1, auto。
    强烈建议用这个属性,而不是分别设定三个属性,因为这个属性可以“聪明地”设定三个属性来达到你要的效果。
    你可以认为 flex 属性就是定义了每个孩子分隔父容器宽度的比例。
    比如容器 200px,三个孩子设置了 flex 分别是 1-2-1,那么他们实际上宽度是 50px 100px 50px。

    如果你比较较真,这个flex属性到底是如何工作的?
    实际上他是自动设置了三个属性:flex-grow, flex-shrink, flex-basis。
    而且为什么强烈推荐用flex,而不是分别设定三个属性,是因为 flex 属性会自动计算 flex-basis 属性的值。
    比如容器宽度为 200px,然后你给三个孩子分别设置了
    .item1 { flex: 1;}
    .item2 { flex: 2;}
    .item3 { flex: 1;}
    那么他们的宽度将是 50-100-50
    如果你想单独设置每一个孩子的三个属性,你会发现竟然无法按照 1-2-1 的比例平分了。
    因为flexbox的计算每个孩子的宽度分两部分:
    1,计算出孩子本身的宽度
    2,将剩余的空白按比例平分给每一个孩子。
    所以你如果这样定义:
    .item1 { flex-grow: 1;flex-shrink:1;}
    .item2 { flex-grow: 2;flex-shrink:2;}
    .item3 { flex-grow: 1;flex-shrink:1;}
    你会发现孩子不是 50-100-50 的宽度,因为他们是按照 1-2-1 平分了剩余的空白。
    假设每个孩子本身是 20px 宽度,那么这么定义之后,他们其实按 1-2-1 平分了 140px 的空白。加上自身宽度之后比例 显然不是 1-2-1。
    所以你还需要把它们的flex-basis也设置成 1-2-2,这么写才行:
    .item1 { flex-grow: 1;flex-shrink:1;flex-basis: 20px;}
    .item2 { flex-grow: 2;flex-shrink:2;flex-basis: 40px;}
    .item3 { flex-grow: 1;flex-shrink:1;flex-basis: 20px;}

    而这样就很麻烦,不如直接用 flex 属性来定义。而事实上,你可以认为 flex 属性就是帮你做了上面的计算。

    align-self
    单独在当前孩子上覆盖了 align-items 属性。
    展开全文
  • 弹性盒布局实例

    2019-09-29 19:50:28
    今天给大家搞一个弹性盒布局的实例,最近一直在复习一些基础的东西,所以一直会跟大家分享一些基础的东西 说实话,最近感觉被掏空了,别问我为什么,谁去保健谁知道,哈哈,注意安全,好了步入正题,今天用...

      今天给大家搞一个弹性盒布局的实例,最近一直在复习一些基础的东西,所以一直会跟大家分享一些基础的东西

      说实话,最近感觉被掏空了,别问我为什么,谁去保健谁知道,哈哈,注意安全,好了步入正题,今天用弹性盒写了一个小例子,

      关于弹性盒的一些基础我就不列举了,大家有需要可以去   http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html    阮一峰大佬的网站去看看

      他已经写的非常详细了,好,那我们来直接举栗

      

      老规矩,我还是把代码扔上来,大家可以自己拉下去玩一下

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{margin: 0;padding: 0}
            /* box的样式 */
            .box{
                height: 300px;
                width: 100%;
                background: oldlace;
                margin: 150px auto;
                display: flex;
                justify-content: space-around;
                align-items: center;
            }
            /* box下div的样式 */
            .box>div{
                width: 130px;
                height: 130px;
                background-color: black;
                display: flex;
                padding: 20px;
            }
            /* span的样式 */
            span{
                height: 25px;
                width: 25px;
                background-color: white;
                border-radius: 50%;
            }
            /*写筛子*/
    
            /* 第一个筛子面 */
            .a1{
                /* 控制主轴的排列 */
                justify-content: center;
                /* 控制副轴的排列 */
                align-items: center;
            }
    
            /* 第二个筛子面 */
            .a2{
                /* 将主轴改变为列 */
                flex-direction: column;
    
                justify-content: space-around;
                align-items: center
            }
            /* 第三个筛子面 */
            .a3{
                justify-content: space-between;
            }
            .a3>span:nth-of-type(2){
                align-self: center;
            }
            .a3>span:nth-of-type(3){
                align-self: flex-end;
            }
            /* 第四个筛子面 */
            .a4{
                justify-content: space-around;
            }
            .a4>div{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
    
            /* 第五个筛子面 */
            .a5{
                justify-content: space-around;
            }
            .a5>div{
                display: flex;
                flex-direction: column;
                justify-content:space-around;
            }
    
            /*第六个筛子面*/
            .a6{
                justify-content: space-around;
            }
            .a6>div{
                display:flex;
                flex-direction: column;
                justify-content: space-around;
            }
    
        </style>
    </head>
    <body>
        <div class="box">
            <!-- 第一个div -->
            <div class="a1"><span></span></div>
            <!-- 第二个div -->
            <div class="a2"><span></span><span></span></div>
            <!-- 第三个div -->
            <div class="a3"><span></span><span></span><span></span></div>
            <!-- 第四个div -->
            <div class="a4">
                    <div><span></span><span></span></div>
                    <div><span></span><span></span></div>
               </div>
            <!-- 第五个div -->
            <div class="a5">
                    <div><span></span><span></span></div>
                    <div><span></span></div>
                    <div><span></span><span></span></div>
            </div>
            <!-- 第六个div -->
            <div class="a6">
                    <div><span></span><span></span><span></span></div>
                    <div><span></span><span></span><span></span></div>
            </div>
        </div>
    </body>
    </html>

           哇,这木长的代码,你竟然能看到这里,太感动了,抓紧联系我好吧,我带你保健去


    更多专业前端知识,请上【猿2048】www.mk2048.com
    展开全文
  • CSS3 弹性盒布局模型和布局原理

    千次阅读 2017-02-09 14:04:14
     虽然可以使用其他CSS样式属性来实现页面布局处理,但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式,即实现非常灵活的布局处理。...

           在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。

           虽然可以使用其他CSS样式属性来实现页面布局处理,但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式,即实现非常灵活的布局处理。

           引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作。在该布局模型中,容器会根据布局的需要,调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时,其中包含的条目也会被动态地调整。比如当容器尺寸变大时,其中包含的条目会被拉伸以占满多余的空白空间;当容器尺寸变小时,条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以由开发人员自由操作。

          在进行详细 解释这个模型之前,我们先了解一下弹性盒模型的几个属性,稍微看一下就好,后面会解释具体的用法。

    1)box-orient:用来确定子元素的方向。是横着排还是竖着走。

    2)box-direction:用来确定子元素的排列顺序,即是否反转。

    3)box-pack:用来确定子元素的左右对齐方式。

    4)box-align:用来确定子元素的上下对齐方式。

    5)box-flex:用来确定子元素如何分配其剩余元素。子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和。

    5)box-lines:用来决定子元素是可以换行显示。

    6)box-flex-group:用来确定子元素的所属组。

    7)box-ordinal-group:用来确定子元素的显示顺序。

       接下来开始通过一个示例页面开始学习弹性盒布局。该示例页面中的body元素中的代码如下所示。

    <div id="main">
        <div class="content">
            <section>
                <h1>section 1</h1>
                <p>示例文字</p>
            </section>
            <section>
                <h1>section 2</h1>
                <p>示例文字</p>
            </section>
            <section>
                <h1>section 3</h1>
                <p>示例文字</p>
            </section>
            <section>
                <h1>section 4</h1>
                <p>示例文字</p>
            </section>
        </div>
        <div class="content">
            <section>
                <h1>section 5</h1>
                <p>示例文字</p>
                <section>
                    <h1>section 6</h1>
                    <p>示例文字</p>
                </section>
                <section>
                    <h1>section 7</h1>
                    <p>示例文字</p>
                </section>
                <section>
                    <h1>section 8</h1>
                    <p>示例文字</p>
                </section>
        </div>
        <div class="content">
            <section>
                <h1>section 9</h1>
                <p>示例文字</p>
            </section>
            <section>
                <h1>section 10</h1>
                <p>示例文字</p>
            </section>
            <section>
                <h1>section 11</h1>
                <p>示例文字</p>
            </section>
            <section>
                <h1>section 12</h1>
                <p>示例文字</p>
            </section>
        </div>
    </div>

          为了更清晰看清楚结构,具体的样式代码如下:

            #main {
                border: 2px solid #382aff;
                padding: 1em;
            }
            .content {
                border: 2px solid #ff2834;
                padding: 1em;
            }
            div {
                border: 2px solid #73ff58;
                padding: 1em;
            }
         页面显示结果如下:


    1、使用弹性盒布局 dispaly:box

          接下来,对示例页面使用弹性盒布局:

           弹性盒布局的指定方法为:对需要布局的元素的容器元素使用display: -moz-box;display: -webkit-box;display: box;样式属性,因为这个属性需要兼容各种浏览器,所以需要写前缀进行兼容性书写。在CSS Flexible Box模块中,该容器元素中的每一个元素均被称为“Flex item”,将该容器元素称为“Flex container”。

      弹性盒布局方式与使用float等样式属性进行的布局方式的一个主要区别为,当使用float等样式属性时,需要对容器中每一个元素指定样式属性,当使用弹性盒布局时,只需对容器元素指定样式属性。

      接下来,我们首先对所有样式类名为content的div元素使用弹性盒布局,这些div元素的容器元素为id属性值为main的div元素,修改该元素的样式代码如下所示:

           #main {
                border: 2px solid #382aff;
                padding: 1em;
                display: -moz-box;
                display: -webkit-box;
                display: box;
            }

           在浏览器中打开示例页面,页面中所有样式类名为content的div元素的排列方式被修改为横向排列,如下图所示。


    2、设置元素排列顺序 box-direction

      可以通过box-direction样式属性的使用来控制容器中所有子元素的排列顺序,可指定值如下所示。

    • normal | reverse | inherit

          其中normal是默认值,表示按照正常顺序排列。所谓正常顺序,就是我们看书写文字的顺序,从左往右,由上至下,先出现的元素,就上面或是左边。而reverse表示反转。  

         修改id属性值为main的div元素的样式代码如下所示:

            #main {
                border: 2px solid #382aff;
                padding: 1em;
                display: -moz-box;
                display: -webkit-box;
                display: box;
                -moz-box-direction: reverse;
                -webkit-box-direction: reverse;
                box-direction: reverse;
            }

           在浏览器中打开示例页面,页面中所有样式类名为content的div元素的排列方式被修改为从容器元素,即id属性值为main的div元素的右端开始横向反向排列,如下图所示。


       接下来首先恢复所有样式类名为content的div元素的排列方式为横向正向排列,修改id属性值为main的div元素的样式代码如下所示:

            #main {
                border: 2px solid #382aff;
                padding: 1em;
                display: -moz-box;
                display: -webkit-box;
                display: box;
            }

      然后对所有样式类名为content的div元素指定box-direction: reverse;样式属性,代码如下所示:

            .content {
                border: 2px solid #ff2834;
                padding: 1em;
                display: -moz-box;
                display: -webkit-box;
                display: box;
                -moz-box-direction: reverse;
                -webkit-box-direction: reverse;
                box-direction: reverse;
            }

      在浏览器中打开示例页面,页面中所有content的div元素的所有section子元素的排列方式被修改为纵向反向排列(不包含section子元素中的section孙元素),如下图所示。


    3、设置元素排列方式 box-orient

          可以通过box-orient来确定容器中子元素的方向。是横着排还是竖着走。可选的值有:

    horizontal | vertical | inline-axis | block-axis | inherit

          其中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。

         然后对所有样式类名为content的div元素指定-moz-box-orient:vertical; -webkit-box-orient:vertical; box-orient:vertical; 样式属性,代码如下显示:

            .content {
                border: 2px solid #ff2834;
                padding: 1em;
                display: -moz-box;
                display: -webkit-box;
                display: box;
                -moz-box-orient:vertical;
                -webkit-box-orient:vertical;
                -o-box-orient:vertical;
                box-orient:vertical;
            }

       在浏览器中打开示例页面,页面中所有content的div元素的所有section子元素的排列方式被修改为纵向排列(不包含section子元素中的section孙元素),如下图所示。


    4、设置元素宽度 box-flex

           接下来首先介绍如何设置被横向排列的每一个元素的宽度。

      可以通过flex属性值的使用使所有子元素的总宽度等于容器宽度。

      接下来通过将所有样式类名为content的div元素的flex属性值设置为1的方法使所有样式类名为content的div元素的总宽度等于容器元素,即id属性值为main的div元素的宽度,代码如下所示。当所有样式类名为content的div元素的flex属性值都被设置为1时,这些div元素的宽度均等。

             .content {
                border: 2px solid #ff2834;
                padding: 1em;
                display: -moz-box;
                display: -webkit-box;
                display: box;
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                box-flex: 1;
                -moz-box-orient:vertical;
                -webkit-box-orient:vertical;
                -o-box-orient:vertical;
                box-orient:vertical;
            }

        在浏览器中打开示例页面,所有样式类名为content的div元素的宽度自动增长,这些元素的总宽度等于容器元素,即id属性值为main的div元素的宽度,每一个样式类名为content的div元素的宽度均等,如下图所示。

           接下来,我们设置第二个样式类名为content的div元素的box-flex属性值为2,代码如下所示。

            .content:nth-child(2) {
                -webkit-box-flex: 2;
                -moz-box-flex: 2;
                box-flex: 2;
            }

           在浏览器中打开示例页面,所有样式类名为content的div元素的宽度自动增长,第二个类名为content的div元素 的宽度时其他两个div的2倍,如下图所示。


          为了更清晰地计算元素宽度,我们取消所有元素的边框设置及内边距设置,修改后的完整样式代码如下所示。

            #main {
                display: -moz-box;
                display: -webkit-box;
                display: box;
            }
            .content {
                display: -moz-box;
                display: -webkit-box;
                display: box;
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                box-flex: 1;
                -moz-box-orient:vertical;
                -webkit-box-orient:vertical;
                -o-box-orient:vertical;
                box-orient:vertical;
            }
            .content:nth-child(2) {
                -webkit-box-flex: 2;
                -moz-box-flex: 2;
                box-flex: 2;
            }

          在浏览器中打开示例页面,第二个样式类名为content的div元素宽度为其他样式类名为content的div元素宽度的两倍,假设这些元素的容器元素,即id属性值为main的div元素的宽度等于600px,则第一个与第三个样式类名为content的div元素宽度的宽度均等于150px,第二个样式类名为content的div元素宽度的宽度等于300px。

    5、设置垂直方向上的对齐方式 box-align

          box-align决定了垂直方向上的空间利用,也就是垂直方向上的对齐表现。为了便于记忆,我们可以拿来和CSS2中的vertical-align隐射记忆,两者都有”align”,都是都是垂直方向的对齐。

         box-align的可选参数有:

    start | end | center | baseline | stretch

         其中stretch为默认值,为拉伸,也就是父标签高度过高,其孩子元素的高度就多高,start表示顶边对齐,end为底部对齐,center为居中对齐,baseline表示基线(英文字母o,m,n等的底边位置线)对齐。

    6、设置垂直方向上的对齐方式box-pack

          box-pack决定了父标签水平遗留空间的使用,其可选值有:

    start | end | center | justify

          就大部分的行为表现来说分别对应text-align属性的值:left | right | center | justify;但是,之所以box-pack不使用”left”, 而是”start”,是因为box-direction属性,这玩意可以反转原本的排列,原本的“左对齐”反转后结果是“右对齐”了,此时”left”显然就词不达意了,所以使用”start”更具有概括性,就是与父标签的起始位置对齐,从而不会产生语义与行为上的困扰。

    7、box-flex-group和box-ordinal-group

          子元素除了以上说的几个属性外,还有两个属性box-flex-group和box-ordinal-group,因为这两个属性实用性不强,这里就不做详细的说明。目前没有浏览器支持 box-flex-group 属性。

         box-ordinal-group用整数值来定义伸缩盒对象的子元素显示顺序。数值越小,位置就越靠前,这不难理解,第一组在最前嘛,随后第二组,第三组… 例如:box-ordinal-group:1的组就会在box-ordinal-group:2的组前面显示。于是,我们可以利用这个属性改变子元素的顺序。



    展开全文
  • 弹性盒子(灵活布局)详解

    千次阅读 多人点赞 2017-11-06 16:34:09
    2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。 读了本篇文章,大家将会知道:Flex布局相较于传统布局方式有哪些优点; 为什么我们要采用Flex布局来进行页面设计; ...

    2009年,W3C 提出了一种新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局。



    读了本篇文章,大家将会知道:



    Flex布局相较于传统布局方式有哪些优点;
    为什么我们要采用Flex布局来进行页面设计;
    我们如何通过Flex布局来设计页面。


    传统布局——基于盒子模型,依赖 display 属性、position属性、float属性。
    它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
    并且,传统布局代码冗长,出错率高,要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。

    但是,Flex布局就就可以避免这种情况:
    Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。



    任何一个容器都可以指定为Flex布局。

    注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性都将失效!!!


    那么如何实现Flex布局,它可以帮助我们实现什么效果呢

    容器属性:

    1. flex-direction属性:决定主轴的方向(即项目的排列方向);
    2. flex-wrap属性:规定如果一条轴线排不下,如何换行;
    3. flex-flow属性:是flex-direction属性和flex-wrap属性的简写形式,默认值为row/nowrap;
    4. justify-content属性:定义了项目在主轴上的对齐方式;
    5. align-items属性:定义项目在交叉轴上如何对齐;
    6. align-content属性:定义了多根轴线的对齐方式;


    容器属性具体实现效果:

    一、flex-direction属性:决定主轴的方向(即项目的排列方向)。


    - row(默认值):主轴为水平方向,起点在左端;
    - row-reverse:主轴为水平方向,起点在右端;
    - column:主轴为垂直方向,起点在上沿;
    - column-reverse:主轴为垂直方向,起点在下沿。


    这里写图片描述


    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #box {
                display: flex;
                /*flex-direction: row;         //水平方向,起点在左端;
                flex-direction: row-reverse;   //水平方向,起点在右端;
                flex-direction: column;        //垂直方向,起点在上沿;
                flex-direction: column-reverse;//垂直方向,起点在下沿。
                */
            }
    
            #div1, #div2, #div3 {
                width: 300px;
                height: 200px;
            }
    
            #div1 {
                background-color: #859aff;
            }
    
            #div2 {
                background-color: #9d4c48;
            }
    
            #div3 {
                background-color: #58a429;
            }
        </style>
        <title>弹性盒子</title>
    </head>
    <body>
    <div id="box">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
    </body>
    </html>

    二、flex-wrap属性
    默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

    - nowrap(默认):不换行;
    - wrap:换行,第一行在上方;
    - wrap-reverse:换行,第一行在下方。


    这里写图片描述


    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #box {
                display: flex;
                /*flex-wrap: nowrap;        //不换行;
                  flex-wrap: wrap;          //换行,第一行在上方;
                  flex-wrap: wrap-reverse;  //换行,第一行在下方。*/
    
            }
    
            #div1, #div2, #div3,#div4,#div5,#div6 {
                width: 300px;
                height: 200px;
            }
    
            #div1 {
                background-color: #859aff;
            }
    
            #div2 {
                background-color: #9d4c48;
            }
    
            #div3 {
                background-color: #58a429;
            }
    
            #div4 {
                background-color: #16a497;
            }
    
            #div5 {
                background-color: #a44166;
            }
    
            #div6 {
                background-color: #1ca460;
            }
        </style>
        <title>弹性盒子</title>
    </head>
    <body>
    <div id="box">
        <div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
        <div id="div4">4</div>
        <div id="div5">5</div>
        <div id="div6">6</div>
    </div>
    </body>
    </html>
    

    三、flex-flow属性
    是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。


    四、justify-content属性:定义了项目在主轴上的对齐方式。

    - flex-start(默认值):左对齐;
    - flex-end:右对齐;
    - center: 居中;
    - space-between:两端对齐,项目之间的间隔都相等;
    - space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。


    这里写图片描述


    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #box {
                display: flex;
                /*justify-content: flex-start;       //左对齐;
                justify-content: flex-end;         //右对齐;
                justify-content: center;           //居中;
                justify-content: space-between;    //两端对齐,项目之间的间隔都相等;
                justify-content: space-around;     //每个项目两侧的间隔相等。
    */
    
            }
    
            #div1, #div2, #div3,#div4,#div5,#div6 {
                width: 300px;
                height: 200px;
            }
    
            #div1 {
                background-color: #859aff;
            }
    
            #div2 {
                background-color: #9d4c48;
            }
    
            #div3 {
                background-color: #58a429;
            }
    
            #div4 {
                background-color: #16a497;
            }
    
            #div5 {
                background-color: #a44166;
            }
    
            #div6 {
                background-color: #1ca460;
            }
        </style>
        <title>弹性盒子</title>
    </head>
    <body>
    <div id="box">
        <div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
        <div id="div4">4</div>
        <div id="div5">5</div>
        <div id="div6">6</div>
    </div>
    </body>
    </html>

    五、align-items属性:定义项目在交叉轴上如何对齐。

    - flex-start:交叉轴的起点对齐;
    - flex-end:交叉轴的终点对齐;
    - center:与交叉轴的中点对齐;
    - space-between:与交叉轴两端对齐,轴线之间的间隔平均分布;
    - space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍;
    - stretch(默认值):轴线占满整个交叉轴。


    这里写图片描述


    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #box {
                display: flex;
                align-content: flex-start;
                align-content: flex-end;
                align-content: center;
                align-content: space-between;
                align-content: space-around;
                align-content: stretch;
            }
    
            #div1, #div2, #div3, #div4, #div5, #div6 {
                width: 300px;
                height: 200px;
            }
    
            #div1 {
                background-color: #859aff;
            }
    
            #div2 {
                background-color: #9d4c48;
            }
    
            #div3 {
                background-color: #58a429;
            }
    
            #div4 {
                background-color: #16a497;
            }
    
            #div5 {
                background-color: #a44166;
            }
    
            #div6 {
                background-color: #1ca460;
            }
        </style>
        <title>弹性盒子</title>
    </head>
    <body>
    <div id="box">
        <div id="div1">1</div>
        <div id="div2">2</div>
        <div id="div3">3</div>
        <div id="div4">4</div>
        <div id="div5">5</div>
        <div id="div6">6</div>
    </div>
    </body>
    </html>



    Programming is an art form.

    展开全文
  • 深入理解弹性盒flex布局

    千次阅读 多人点赞 2018-10-24 17:27:44
    flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代浏览器指的就是 IE9 及以上的浏览器 2....
  • 使用float或position属性进行页面布局的缺点 两个块区域是各自独立的,如果在其中一个区域加入一些内容,将会使两个元素的底部不对齐,导致页面多出一块空白区域。 如下例所示,第一个DIV中有图像元素,篇幅比较大...
  • 弹性盒子布局

    2019-06-21 00:20:25
    最近在开发公司的平台系统,因为该项目主要是运行在移动端,所以采用了flex弹性布局。flex布局用起来很灵话,提高了开发效率。而且性能貌似比传统的浮动布局好。 1. 首先声明父元素布局方式为弹性布局  display: ...
  • CSS3弹性盒子布局

    千次阅读 2016-07-29 17:27:04
    CSS3中引入的弹性盒子布局已经有一段时间,也经历了几次比较重大的修改,可本人一直都没怎么使用过这种布局,惭愧万分!这几天研究了一下这种布局方式,记录一下学习笔记,以后日后用到时过来查看。  2016年5月26日...
  • 首先介绍弹性盒布局中的一些术语的意思 main-axis:进行布局时作为布局基准的轴,在横向布局时为水平轴,在纵向布局时为垂直轴 main-start/main-end:进行布局时的起点和终点。在横向布局时为容器的左端和右端...
  • #container{ display: -moz-box; display: -webkit-box; border: solid 1px blue; -moz-box-orient: horizontal; -webkit-box-orient:horizontal; width: 500p
  • 常见布局弹性布局

    千次阅读 2020-08-24 12:04:53
    说到弹性布局,就得介绍一下css属性中的弹性盒——display:flex 它分为主轴和交叉轴两个方向,没有固定的方向,默认主轴是X轴,交叉轴是Y轴,也可以通过属性 flex-direction: column来设置主轴为Y轴 主轴是X轴,...
  • /*父级*/ .location-box{ flex:1; background:#fff; display:flex; flex-wrap:wrap; /*换行*/ } /*子级*/ .location-box .one-item{ display:flex; ...
  • 弹性盒子特性-弹性盒子里的弹性项目不舍宽高或者设置宽高的情况,如果不设置其他属性 ,弹性盒子都会根据弹性盒子大小来收缩项目,如果项目过多,比如 弹性盒的宽高都为100px,项目的大小都为30px,那么当有四个项目...
  • 在线演示使用自适应窗口的弹性盒布局如果我们想让这三个div的总宽度等于浏览器窗口的宽度,而且能够随着窗口宽度的改变而改变。那么我们使用盒布局,并且只要使用一个box-flex属性,使盒布局变成弹性盒布局就可以了...
  • css3弹性盒子flex实现三栏布局

    万次阅读 2018-03-07 20:33:33
    如题:高度已知,左右栏宽度300px,中间自适应:弹性盒子本身就是并排的,我们设置宽度即可。用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,这里...
  • 弹性布局属性4. CSS3多列5. 响应式 1. CSS3怪异模型 在说flex布局之前,再来回顾一下CSS3的怪异模型。 (1) 标准模型的总大小=width/height+padding+border+margin; 怪异模型的总大小=width/height+margin...
  • 弹性和模型布局实现垂直居中以及水平居中 先上效果图 实现代码: html代码: css代码:
  • 我们现在想做一个头部的导航栏,又想用fixed把它固定在上方,又想用弹性盒布局去设置它内部的样式,可是发现其中的弹性盒布局已经失效了。 HTML代码如下: <ul> <li>协会简介</...
  • ![图片说明](https://img-ask.csdn.net/upload/201610/14/1476427881_12135.png)
  • CSS3弹性盒子介绍 弹性盒子是 CSS3 的一种新...引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex ite...
1 2 3 4 5 ... 20
收藏数 14,709
精华内容 5,883
关键字:

弹性盒布局