首页 1 2 3 4 5 6 7

Flexbox 弹性盒子

一、Flexbox 弹性盒子

1、项目

直接被放置在 Flex容器 中的元素通常被称作 Flex项目 ( flex item ) 或 Flex元素

有时候也将 Flex项目 称作 弹性盒子 或 柔性盒子 。

让一个元素直接处于 Flex容器中，则该元素就是一个 Flex项目 ( 弹性盒子 / 柔性盒子 )。

2、项目属性

2.1、flex-basis

1、定义

MDN Web Docs : flex-basis

The flex-basis CSS property sets the initial main size of a flex item.

It sets the size of the content box unless otherwise set with box-sizing.

CSS 属性 flex-basis 指定了 flex元素在主轴方向上的初始大小。

如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

注意：当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.

2、语法

属性值默认为 auto，可以是长度单位，可以是相对于其父弹性盒容器主轴尺寸的 百分数 。负值是不被允许的。在flex item内容上的自动尺寸，基于 flex 的元素的内容自动调整大小。

3、例子

.first>.item {
            flex-basis: 10%;
        }
.first>.item:nth-child(1){
            flex-basis: auto;
        }
.first>.item:nth-child(2){
            flex-basis: 40%;
        }
.first>.item:nth-child(3){
            flex-basis: 180px;
        }
.first>.item:nth-last-child(2) {
            flex-basis:content;
        }

<div class="container first">
        <div class="item">1 、auto</div>
        <div class="item">2 、40%</div>
        <div class="item">3 、180px</div>
        <div class="item">4 、content</div>
        <div class="item">5</div>
    </div>

2.2、flex-grow

1、定义

指定弹性盒子如何瓜分弹性容器主轴上剩余的空白空间。默认值是0.

2、语法

flex-grow：number；

number取值可以为整数，小数。如果是复数，无效。

3、例子

如图所示在主轴（flex-direction：row；）上是还有空白区域的，可以使用flex-grow。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。

<style>
.first>.item {
            flex-basis: 10%;    
        }
.first>.item:nth-last-child(2) {
            flex-grow: 2;
        }
        
.first>.item:nth-last-child(1) {
            flex-grow: 5;
        }
</style>
<div class="container first">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">4</div>
     <div class="item">5</div>
</div>

2.3、flex-shrink

1、定义

CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

初始值	`1`
适用元素	flex items, including in-flow pseudo-elements
是否是继承属性	否
计算值	as specified
Animation type	a number

2、语法

flex-shrink属性只能是一个。负值是不被允许的

flex-shrink:2;
flex-shrink:0.6;

参考：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/number

3、例子

.first>.item {
            flex-basis: 150px;
        }
.first>.item:nth-child(1) {
            flex-shrink: 1;
        }
 .first>.item:nth-child(2) {
            flex-shrink: 3;
        }
.first>.item:nth-child(3) {
            flex-shrink: 5;
        }
.first>.item:nth-last-child(2) {
            flex-shrink: 0.9;
        }
        
.first>.item:nth-last-child(1) {
            flex-shrink: 0.1;
        }
  

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

2.4、flex

1、定义

The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

flex CSS简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。

初始值	as each of the properties of the shorthand: `flex-grow`: `0flex-shrink`: `1flex-basis`: `auto`
适用元素	flex items, including in-flow pseudo-elements
是否是继承属性	否

2、语法

/* 关键字值 */
flex: auto;
flex: initial;
flex: none;

/* 一个值, 无单位数字: flex-grow */
flex: 2;

/* 一个值, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: min-content;

/* 两个值: flex-grow | flex-basis */
flex: 1 30px;

/* 两个值: flex-grow | flex-shrink */
flex: 2 2;

/* 三个值: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

可以使用一个，两个或三个值来指定 flex属性。

单值语法: 值必须为以下其中之一:

一个无单位数: 它会被当作flex:<number> 1 0; <flex-shrink>的值被假定为1，然后<flex-basis> 的值被假定为0。

一个有效的**宽度(width)**值: 它会被当作 <flex-basis>的值。
关键字none，auto或initial.

双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

一个无单位数：它会被当作 <flex-shrink> 的值。
一个有效的宽度值: 它会被当作 <flex-basis> 的值。

三值语法:

第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
第三个值必须为一个有效的宽度值，并且它会被当作 <flex-basis> 的值。

3、例子

<style> 
		.first>.item {
            /* flex : flex-grow flex-shrink flex-basis ; */
            flex: 0 1 10%;
        }
        
        .first>.item:nth-last-child(2) {
            /* flex : flex-grow flex-shrink flex-basis ; */
            flex: 1 1 10%;
        }
        
        .first>.item:nth-last-child(1) {
            /* flex : flex-grow flex-shrink flex-basis ; */
            flex: 3 1 10%;
        }
        
        .second {
            width: 500px;
        }
        
        .second>.item {
            /* flex-basis: 120px;
      		flex-shrink: 1; */
            /* flex : flex-grow flex-shrink flex-basis ; */
            flex: 0 1 120px;
        }
        
        .second>.item:nth-last-child(2) {
            flex: 0 8 120px;
        }
        
        .second>.item:nth-last-child(1) {
            flex: 0 18 120px;
        }
</style>


<body>

    <h3>弹性盒子</h3>
    <p> flex : flex-grow flex-shrink flex-basis ;</p>

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

    <p> flex : flex-grow flex-shrink flex-basis ;</p>
    <div class="container second">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

</body>

2.5、order

1、定义

CSS order 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布

局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。

注意: order 仅仅对元素的视觉顺序 (visual order) 产生作用，并不会影响元素的逻辑或 tab 顺序。

**order** 不可以用于非视觉媒体，例如 speech。

初始值	`0`
适用元素	Flex items, grid items, and absolutely-positioned flex and grid container children
是否是继承属性	否

2、语法

3、例子

<style>
	.item {flex: 0 1 20%;}

    .item2 {order: 1;}
        
     .item3 {order: 2;}
        
     .item4 {order: 3;}
        
     .item1 {order: 4;}
</style>

<body>

    <div class="container">
        <div class="item item1">order: 4;天王盖地虎</div>
        <div class="item item2">order: 1;藜蒿炒腊肉</div>
        <div class="item item3">order: 2;落霞与孤鹜齐飞</div>
        <div class="item item4"> order: 3;风里雨里我在东理等你</div>
    </div>

</body>

2.6、align-self

1、定义

指定flex容器里面flex-item在交叉轴的位子排列方式 , 覆盖已有的 align-items 的值。会按照 cross axis（当前 flex 元素排列方向的垂直方向）进行排列。

align-self属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。

2、语法

auto : 设置为父元素的 align-items 值。

flex-start : flex 元素会对齐到 cross-axis 的首端。
flex-end : flex 元素会对齐到 cross-axis 的尾端。
center : flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 尺寸大于 flex 容器，将在两个方向均等溢出。

3、例子

<style>
   .item {
            flex: 0 1 20%;}
	.item:nth-child(odd) {
            background: #6666fa;}
      .item:nth-child(even) {
            background: #fa6666;}
      .item1 {
            align-self: flex-start;}
      .item2 {
            align-self: center;}
      .item3 {
            align-self: flex-end;}
      .item4 {
            align-self: baseline;}
</style>

<body>

    <div class="container">
        <div class="item item1">flex-start    天王盖地虎</div>
        <div class="item item2">center    藜蒿炒腊肉</div>
        <div class="item item3">flex-end   落霞与孤鹜齐飞</div>
        <div class="item item4">baseline    风里雨里我在东理等你</div>
    </div>

</body>

弹性盒子注意事项:

定义 flex 项目的 flex-grow 。负值无效。省略时默认值为 1。 (初始值为 0)

定义 flex 项目的 flex-shrink 。负值无效。省略时默认值为1。 (初始值为 1)

定义 flex 项目的 flex-basis 属性。若值为0，则必须加上单位，以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)

align-items与align-self的区别:

align-items是弹性容器的属性 , align-items属性将所有直接子节点上的align-self值设置为一个组。

align-self是弹性容器内部的弹性盒子,(也称弹性项目)的属性 , 设置项目在其包含块中在交叉轴方向上的对齐方式。会覆盖已有的 align-items 的值。