CSS3 弹性盒子详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43934644/article/details/101426251

CSS3中的弹性盒子

1：什么是弹性盒子

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。（菜鸟教程拔下来的）

2：弹性盒子怎么设置：

在元素的css格式中设置display：flex即可；

3：弹性盒子的一些属性：

弹性盒子的属性	值
flex-direction	row（主轴为水平方向，起点在左端） row-reverse（主轴为水平方向，起点在右端） column（主轴为垂直方向，起点在上沿） column-reverse（主轴为垂直方向，起点在下）
flex-wrap	nowrap（不换行默认） wrap（换行，第一行在上方） wrap-reverse（换行，第一行在下方）
flex-flow	属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap<
justify-content	flex-start（左对齐） flex-end（右对齐） center（居中） space-between（两端对齐，第一个和最后一个子元素在两端，每个子元素间隔相等） space-around（每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。）
align-items	flex-start（交叉轴的起点对齐） flex-end（交叉轴的终点对齐） center（交叉轴的中心对齐） baseline（项目的第一行文字的基线对齐） stretch（默认值，如果子元素没有设置高度，则该子元素的高度等于父元素高度，除此之外和flex-start相同）
align-content	运用于多个轴线的情况（个人理解为多个交叉轴） flex-start（交叉轴的起点对齐） flex-end（交叉轴的终点对齐） center（交叉轴的中心对齐） space-between（两端对齐，第一个和最后一个子元素在两端，每个子元素间隔相等）flex-start（左对齐） flex-end（右对齐） center（居中） space-between（两端对齐，第一个和最后一个子元素在两端，每个子元素间隔相等） space-around（每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。） stretch（轴线占满整个交叉轴）

3.1：flex-direction

我们学习弹性盒子一定要了解主轴和交叉轴这两个特殊的轴线；而flex-direction定义了主轴的方向，或者可以理解为元素的排列方向，而交叉轴则是（每一行）垂直于主轴的轴；

在这里插入图片描述

（3）row(默认值)：诸侯为水平方向，起点在左端。（2）主轴为垂直方向，起点在上沿。

（4）row-reverse:主轴为水平方向，起点在右端。（1）主轴为垂直方向，起点在下沿。

3.2：flew-wrap:

nowarp（默认）：不换行。

wrap：换行，第一行在上方。

在这里插入图片描述

wrap-reverse：换行，第一行在下面。

在这里插入图片描述

3.3：flex-flow

这个属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

box { flex-flow: flex-direction || flex-wrap; }

3.4：justify-content

属性定义了项目在主轴上的对齐方式

在这里插入图片描述

3.5：align-items

定义项目在交叉轴上如何对齐：

3.6：align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用(多行的时候有效)

在这里插入图片描述

4：弹性盒子内的孩子属性：

4.1：order属性定义项目的排序顺序。数值越小，排名越靠前，默认为0；

<div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>

.container div:nth-child(1){
     order: 3;
 }
 .container div:nth-child(2){
      order: 2;
 }
 .container div:nth-child(3){
      order: 1;
 }

在这里插入图片描述

4.2：flex-grow

属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4.3：flex-shrink

属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。负值对该属性无效。

4.4：flex-basis

属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。当设置百分制的时候，该元素的大小是父元素大小乘以百分制；

<div class="container">
        <div class="header">1</div>
        <div class="main">2</div>
        <div class="footer">3</div>
    </div>

 .container{
        display: flex;
        width: 500px;
        border: solid 1px red;
    }

    .container .header{
        width: 100px;
        border: solid 1px #000;
    }

     .main,.footer{
        flex-basis: 10%;
         border: solid 1px #000;
     }