css 弹性盒

标签：应用   padding   属性   注意   相对   情况下   如何   img   百分比   

移动端布局

最近写vue项目，已经忘了移动端布局，今天复习了一下弹性盒；o(╥﹏╥)o

百分百布局

目标元素宽度/父级元素宽度=百分比宽度

rem布局

   // 1rem=屏幕宽度/10 document.documentElement.style.fontSize=document.documentElement.clientWidth/10+'px'

响应式布局

媒体查询

弹性布局

弹性盒

怪异盒模型

box-sizing: content-box|border-box|inherit;

• box-sizing：以特定的方式定义匹配某个区域的特定元素。

  • conten-box：标准盒模型；宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

  在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

  • border-box：怪异盒模型（ie盒模型）；为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

  一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

新版弹性盒

1. 设置弹性盒（父元素）

   display:flex;

2. 子元素在父容器中的位置；主轴排列方式

   flex-direction:row 默认在一行内排列
               row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 
               column：纵向排列。
               column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

3. 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

    flex-start默认，顶端对齐
    flex-end末端对齐
    center居中对齐
    space-between两端对齐，中间自动分配
    space-around自动分配距离

4. 侧轴对齐方式（align-items)

   flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
   flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
   center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
   baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

5. 控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

   nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
   wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
   wrap-reverse：反转 wrap 排列。

6. 行与行之间的对齐方式(align-content);当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <‘ justify-content‘> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。

    flex-start没有行间距
    flex-end底对齐没有行间距
    center居中没有行间距
    space-between两端对齐，中间自动分配
    space-around自动分配距离

7. align-self 属性规定灵活容器内被选中项目的对齐方式。
   注意：align-self 属性可重写灵活容器的 align-items 属性

   auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
   Stretch 元素被拉伸以适应容器。
   Center 元素位于容器的中心。
   flex-start 元素位于容器的开头。
   flex-end 元素位于容器的结尾。

8. flex：复合属性；设置或检索弹性盒模型对象的子元素如何分配空间。

   缩写「flex: 1」, 则其计算值为「1 1 0%」
   缩写「flex: auto」, 则其计算值为「1 1 auto」
   flex: none」, 则其计算值为「0 0 auto」
   flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

9. flex三个属性值

   flex-grow
   一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
   flex-shrink
   一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
   flex-basis
   项目的长度
   

案例

 <div class="cont1">
                    <figure>
                        <img src="./images/img1_03.png" alt="">
                        <figcaption>美食</figcaption>
                    </figure>
                    <figure>
                        <img src="./images/img1_03.png" alt="">
                        <figcaption>美食</figcaption>
                    </figure>
                    <figure>
                        <img src="./images/img1_03.png" alt="">
                        <figcaption>美食</figcaption>
                    </figure>
                    <figure>
                        <img src="./images/img1_03.png" alt="">
                        <figcaption>美食</figcaption>
                    </figure>
                    <figure>
                        <img src="./images/img1_03.png" alt="">
                        <figcaption>美食</figcaption>
                    </figure>
                    <figure>
                        <img src="./images/img1_03.png" alt="">
                        <figcaption>美食</figcaption>
                    </figure>
                    <figure>
                        <img src="./images/img1_03.png" alt="">
                        <figcaption>美食</figcaption>
                    </figure>
                    <figure>
                        <img src="./images/img1_03.png" alt="">
                        <figcaption>美食</figcaption>
                    </figure>
                    <figure>
                        <img src="./images/img1_03.png" alt="">
                        <figcaption>美食</figcaption>
                    </figure>
                    <figure>
                        <img src="./images/img1_03.png" alt="">
                        <figcaption>美食</figcaption>
                    </figure>
                </div>

    .cont1 {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 0.3rem;
    }

    .cont1 figure {
        width: 20%;
        height: 2.75rem;
        display: flex;
        flex-direction: column;
        ;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.3rem;
    }

    .cont1 figure img {
        width: 1.89rem;
    }

效果图

css 弹性盒

标签：应用   padding   属性   注意   相对   情况下   如何   img   百分比   

原文地址：https://www.cnblogs.com/zhaoxinran997/p/12368599.html