flex弹性盒子

目录

一、flex弹性布局与传统布局的区别：

二、flex布局介绍

三、父元素常见属性

四、子元素常见属性

五、flex圣杯布局

六、flex布局应用

一、flex弹性布局与传统布局的区别：
flex弹性布局    传统布局
兼容    IE11+    较好
布局效果    简单方便    繁琐
使用场景    移动端    PC端
二、flex布局介绍
原理：通过给父盒子添加display:flex属性，来控制子盒子的位置和排列方式。

特点（待补充）：

        1、flex布局相较于传统布局（浮动、定位）更简便，但兼容性较差；

        2、父元素设为flex布局后，子元素的float、clear、vertical-align属性失效；

        3、应用于任何元素：块元素、行元素、行内块元素；

        4、display:声明flex属性值  flex，对应块元素，即容器转化为块元素   inline-flex，对应行内元素，即容器转化为行内元素；

        5、子项目中行元素可直接设置宽高，块元素宽度不继承，行内块元素没有间隔；

        6、没有外边距合并问题；

        7、能让页面宽度自适应，高度与字体大小自适应需要配合rem+媒体查询。

三、父元素常见属性
1、flex-direction 决定主轴   x轴  y轴

row    默认值，从左到右  x
row-reverse    从右到左  -x
column    
从上到下  y

column-reverse    
从下到上  -y

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

flex-start    
默认值，从头开始

flex-end

从尾开始(与row-reverse区别在于不会颠倒元素顺序)

center

居中对齐

space-around

平分剩余空间（将剩余空间作为margin值平分给每个子元素）

space-between

先两边贴边，再平分剩余空间(重要)

3、align-items  设置侧轴上的子元素排列方式 （单行）

stretch

默认值，拉伸  不给子元素高度  任何子元素不给高度继承父元素高度的原因

flex-start

从头开始

flex-end

从尾开始(与row-reverse区别在于不会颠倒元素顺序)

center

居中对齐

      注意：只在子元素单行排列时起作用，与flex-wrap: nowrap;共同使用。

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

stretch

默认值，拉伸
flex-start    
默认值，从头开始

flex-end

从尾开始(与row-reverse区别在于不会颠倒元素顺序)

center

居中对齐

space-around

平分剩余空间（将剩余空间作为margin值平分给每个子元素）

space-between

先两边贴边，再平分剩余空间(重要)

      注意：只在子元素多行排列时起作用，与flex-wrap: wrap;共同使用。   

 5、flex-wrap   设置子元素是否换行

nowrap

默认值，不换行

wrap    换行
      注意： 默认不换行，如果子元素宽度和超过父元素宽度，子元素的宽度会被缩小，width属性失效

6、flex-flow   是flex-direction和flex-wrap属性的复合属性

语法：flex-flow: flex-direction属性值 flex-wrap属性值

四、子元素常见属性
1、flex  定义子项目分配剩余空间，属性值表示占有的份数

     语法：flex: <number>;               number值可为数字或者百分比

     注意：剩余空间指除指定宽高的元素所占有的其他所有空间，被分配的子元素宽高将自动撑满剩余空间。

2、align-self  控制子项本身在侧轴上的排列方式

3、order   定义项目的排列顺序

     语法：order:<number>;             默认值为0，数值越小，排列越靠前

五、flex圣杯布局
html:

<section>
      <p></p>
      <p></p>
      <p></p>
</section>
css: 

/* 子元素属性 */
        section {
            display: flex;
            width: 60%;
            height: 100px;
            background-color: blue;
            margin: 50px auto;
        }
        p:first-child {
            width: 100px;
            height: 100px;
            background-color: green;
        }
        p:nth-child(2) {
            /* 宽度与高度不用设置，元素大小为剩余空间大小 */
            flex: 1;
            background-color: pink;
        }
        p:last-child {
            width: 100px;
            height: 100px;
            background-color: rgb(143, 25, 31);
        }

六、flex布局应用
引言：这是我在做页面仿写时发现的关于flex布局的一个应用，在这里记录一下。

问题：在多行下子元素平均分配父元素空间，并子元素存在间隙的情况，如下：

  首先了解：flex容器每一行的宽度 = 每个子容器的宽度 + 子元素对应轴的margin值  

  解决方法：

          1、将多行子元素用一层盒子包裹起来，形成父容器单行排列子盒子，即单行变多行。flex值为数字，margin不会让盒子挤走 ；

          2、间隙用一个元素边框代替 高度为0 或者宽度为0，定位到需要的位置；

          3、width:百分比  不会发生挤走的情况   单行或者多行都能使用 中间间距用自身padding值取代。
————————————————
版权声明：本文为CSDN博主「fine1998_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/fine1998_/article/details/124935573