css3 弹性伸缩布局盒模型flex

CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用空间。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。

TB2qVpodVXXXXXLXpXXXXXXXXXX_!!2406102577.png

主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-direction属性。
主轴起点，主轴终点：Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。
主轴长度：Flex项目在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
侧轴起点，侧轴终点：伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
侧轴长度：Flex项目在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是widht或height属性，由哪一个对着主轴方向决定。

Flex容器属性

1.display

要改变元素的模式为伸缩容器，需要使用display属性
display : flex | inline-flex

版本表格

规范版本	属性名称	块伸缩容器	内联伸缩容器
标准版	display	flex	inline-flex
混合版	display	flexbox	inline-flexbox
最老版	display	box	inline-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
        }

        #box div,#inline div {

            width:100px;
            height:100px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:40px;
            box-sizing:border-box;
        }
        #box {
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
        }
        #inline {
            display:inline-flex;
            border:1px dashed red;
            padding:10px;
        }
    </style>
</head>
<body>

<div class="contentitem">
    <h4>flex 块级伸缩容器</h4>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
<div class="contentitem">
    <h4>inline-flex 内联伸缩容器</h4>
    <div id="inline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
</body>
</html>

image.png

块级伸缩容器与内联级伸缩容器类似，默认都是从左往右排列，唯一不同的是块级伸缩容器独占一行，而内联级伸缩容器随着内容改变。
　　Flex容器不是块容器，因此有些设计用来控制块布局的属性在伸缩布局中不适用。浮动无法影响伸缩容器，而且伸缩容器的margin与其内容的margin不会重叠。如果内联伸缩容器设置了浮动，元素将会以块级伸缩容器显示。

2.flex-direction

定义Flex项目在Flex容器中放置的方向
flex-direction : row | row-reverse | column | column-reverse
row:默认值，如果书写方式是ltr，那么Flex项目从左向右排列；如果书写方式是rtl，那么Flex项目从右向左排列。
row-reverse:如果书写方式是ltr，那么Flex项目从右向左排列；如果书写方式是rtl，那么Flex项目从左向右排列。
column:和row类似，方向从上到下排列。
column-reverse:和row-reverse类似，方向从下到上排列。

版本	属性名称	水平方向	水平反方向	垂直方向	垂直反方向
标准版本	flex-direction	row	row-reverse	column	column-reverse
混合版本	flex-direction	row	row-reverse	column	column-reverse
老版本	box-orient / box-direction	horizontal/normal	horizontal/normal	vertical/normal	vertical/reverse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:600px;
        }

        #row div,#row_reverse div,#column div,#column_reverse div {
            width:50px;
            height:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
        }
        #row,#row_reverse,#column_reverse,#column {
            display:flex;
            border:1px dashed red;
            padding:10px;
        }
        #row {flex-direction:row}
        #row_reverse {flex-direction:row-reverse}
        #column {flex-direction:column}
        #column_reverse {flex-direction:column-reverse}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>flex-direction:row</h4>
    <div id="row">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
<div class="contentitem">
    <h4>flex-direction:row-reverse</h4>
    <div id="row_reverse">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
<div class="contentitem">
    <h4>flex-direction:row</h4>
    <div id="column">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
<div class="contentitem">
    <h4>flex-direction:row-reverse</h4>
    <div id="column_reverse">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
</body>
</html>

image.png

3.flex-wrap

默认情况下，Flex项目都尽可能在一行显示，你可以根据flex-wrap的属性值来改变，让Flex项目多行显示。
因为默认值nowrap不准换行，伸缩容器容纳不下伸缩项目时，各伸缩项目会根据默认的收缩比例进行缩小以适应伸缩容器的宽度
flex-wrap:nowrap | wrap | wrap-reverse
- nowrap:默认值，单行显示，如果书写方式是ltr，Flex项目从左往右排列；如果书写方式是trl，Flex项目从右往左排列。
- wrap:多行显示，如果书写方式是ltr，Flex项目从左往右排列；如果书写方式是trl，Flex项目从右往左排列。
- wrap-reverse:多行显示，如果书写方式是ltr，Flex项目从右往左排列；如果书写方式是trl，Flex项目从左往右排列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:600px;
        }
        #wrap div,#nowrap div,#wrap_reverse div {
            width:50px;
            height:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
        }
        #wrap,#nowrap ,#wrap_reverse{
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
        }
        #wrap {flex-wrap:wrap}
        #nowrap {flex-wrap:nowrap}
        #wrap_reverse {flex-wrap:wrap-reverse}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>flex-wrap:wrap</h4>
    <div id="wrap">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
    </div>
</div>
<div class="contentitem">
    <h4>flex-wrap:nowrap</h4>
    <div id="nowrap">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
    </div>
</div>
<div class="contentitem">
    <h4>flex-wrap:wrap-reverse</h4>
    <div id="wrap_reverse">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
    </div>
</div>
</body>
</html>

image.png

4.flex-flow

这是flex-direction和flex-wrap两个属性的缩写，默认值是：row nowrap
flex-flow :flex-direction || flex-wrap

5.justify-content

用来设置伸缩项目在主轴上的对齐方式。指定如何在伸缩项目之间分布伸缩容器额外空间。当一行上的所有伸缩项目不能伸缩或可伸缩但是已达到最大长度时，这一属性才会对伸缩容器额外空间进行分配。当伸缩项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。
justify-content : flex-start | flex-end | center | space-between | space-around
- flex-start:默认值，伸缩项目向一行的起始位置靠齐。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的末尾。
- flex-end:和flex-start相反，伸缩项目向一行的结束位置靠齐。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的开始。
- center:伸缩项目向一行的中间位置靠齐。伸缩容器的所有额外空间平均分布在第一伸缩项目前面和最后一个伸缩项目的后面。
- space-between:伸缩项目会平均分布在行里。伸缩容器的所有额外空间平均分布在所有伸缩项目之间，但是在第一个伸缩项目之前和最后一个伸缩项目之后不分配空间，也就是说，第一个伸缩项目靠齐开始位置，最后一个伸缩项目靠齐结束位置。
- space-around:伸缩项目会品均分布在行里。伸缩容器的所有额外空间品均分布在所有伸缩项目之间，但是第一个伸缩项目之前与最后一个伸缩项目之后只分配其他位置得到额外空间的一半。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:600px;
        }
        #flex_start div,#flex_end div,#center div,#space_between div,#space_around div {
            width:50px;
            height:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
        }
        #flex_start,#flex_end ,#center,#space_between,#space_around{
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
        }
        #flex_start {justify-content:flex-start}
        #flex_end {justify-content:flex-end}
        #center {justify-content:center}
        #space_between {justify-content:space-between}
        #space_around {justify-content:space-around}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>justify-content:flex-start</h4>
    <div id="flex_start">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>justify-content:flex-end</h4>
    <div id="flex_end">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>justify-content:center</h4>
    <div id="center">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>justify-content:space-between</h4>
    <div id="space_between">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>justify-content:space-around</h4>
    <div id="space_around">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
</body>
</html>

image.png

6.align-items(管理侧轴)

align-items属性和justify-content同样是用来管理伸缩容器额外空间，不同的是，justify-content是用来管理伸缩容器主轴方向的额外空间，而align-items是用来管理伸缩容器侧轴方向的额外空间。
align-items : flex-start | flex-end |center | baseline | stretch
- flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
- flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
- center:伸缩项目的外边距盒在该行的侧轴上居中放置。
- baseline:如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效。其它情况下，该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。
- stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:600px;
        }
        #flex_start div,#flex_end div,#center div,#baseline div,#stretch div {
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            min-height:50px;
        }
        #flex_start,#flex_end ,#center,#baseline,#stretch{
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:100px;
        }
        #flex_start {align-items:flex-start}
        #flex_end {align-items:flex-end}
        #center {align-items:center}
        #baseline {align-items:baseline}
        #stretch {align-items:stretch}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>align-items:flex-start</h4>
    <div id="flex_start">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-itmes:flex-end</h4>
    <div id="flex_end">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-items:center</h4>
    <div id="center">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-items:baseline</h4>
    <div id="baseline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-items:stretch</h4>
    <div id="stretch">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>
</body>
</html>

image.png

7.align-content(管理侧轴)

是伸缩项目占多行时在侧轴方向的对齐属性，这个属性将对每一行起作用而不是每个伸缩项目。
align-content : flex-start | flex-end | center | space-between | space-around | stretch
- flex-start:各行向伸缩容器的起点位置堆叠。
- flex-end:各行向伸缩容器的结束位置堆叠。
- center:各行向伸缩容器的中间位置堆叠。
- space-between:各行在伸缩容器中平均分布。
- space-around:各行在伸缩容器中品均分布，在两边各有一半空间。
- stretch:默认值，各行将会伸展以占用额外空间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;padding:0;
        }
        .contentitem {
            /*margin:10px auto;*/
            background-color:#ccc;
            max-width:500px;
            float:left;
            margin:10px;
        }
        #flex_start div,#flex_end div,#center div,#space_between div,#space_around div,#stretch div {
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            min-height:50px;
        }
        #flex_start,#flex_end ,#center,#space_between,#space_around,#stretch{
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:150px;
            flex-flow:wrap;
        }
        #flex_start {align-content:flex-start}
        #flex_end {align-content:flex-end}
        #center {align-content:center}
        #space_between {align-content:space-between}
        #space_around {align-content:space-around}
        #stretch {align-content:stretch}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>align-content:flex-start</h4>
    <div id="flex_start">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-content:flex-end</h4>
    <div id="flex_end">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-content:center</h4>
    <div id="center">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-content:space-between</h4>
    <div id="space_between">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-content:space-around</h4>
    <div id="space_around">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-content:stretch</h4>
    <div id="stretch">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>
</body>
</html>

image.png

Flex项目属性

1.order

默认情况下，Flex项目是按照文档流的结构顺序排列，在Flexbox模型中，可以通过order属性来改变伸缩项目出现在文档中的顺序
order : <number>;
- number可以是负值，Flexbox容器将根据各项目中order值的大小进行排列

规范版本	属性名	属性值
标准版本	order	<number>
混合版本	flex-order	<number>
老版本	flex-order	<interger>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin:0;padding:0;}
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:500px;
        }
        #order div {
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            height:50px;
        }
        #order {
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:100px;
            flex-flow:wrap;
            justify-content:space-around;
        }
        .orderone {order: 5;}
        .ordertwo { order: 1;}
        .orderthree {order: 0;}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>order:number</h4>
    <div id="order">
        <div class="orderone">1</div>
        <div>2</div>
        <div>3</div>
        <div class="ordertwo">4</div>
        <div class="orderthree">5</div>
        <div>6</div>
        <div>7</div>
    </div>
</div>
</body>
</html>

image.png

2.flex-grow

定义一个Flex项目的扩大比例并且会撑满一行
flex-grow : <number>;
- 默认值为0，不能取负值，没有单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin:0;padding:0;}
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:500px;
        }
        #flex_grow div {
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            height:50px;
        }
        #flex_grow {
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:100px;
            flex-flow:wrap;
            justify-content:space-around;
        }
        .growOne { flex-grow: 2;}
        .growTwo {flex-grow: 1;}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>flex-grow:number</h4>
    <div id="flex_grow">
        <div class="growOne">1</div>
        <div class="growTwo">2</div>
        <div class="growTwo">3</div>
        <div class="growTwo">4</div>
        <div class="growTwo">5</div>
        <div class="growTwo">6</div>
        <div class="growTwo">7</div>
    </div>
</div>
</body>
</html>

image.png

如果伸缩项目的flex-grow设置为1，每个伸缩项目将设置一个大小相等的额外空间。如果给其中一个伸缩项目设置flex-grow设置为2，这个伸缩项目所占的额外空间是其他伸缩项目所占额外空间的2倍。
也可以这样理解，把上例各项目的flex-grow值加起来等于4，就是把额外空间分成4份，比例为1的占1份，比例为2的占2份。

3.flex-shrink

定义一个Flex项目的缩小比例
flex-shrink:<number>
- 默认值为1；

试过了但是没看到效果有可能浏览器不支持下图没有效果不建议使用

image.png

4.flex-basis

定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。
flex-basis:<length> | auto
flex-basis类似于width，用来设置flex-basis长度并指定伸缩基准值，也就是根据可伸缩比例计算出额外空间的分布之前，伸缩项目主轴长度的起始数值。
　　如果设置为0，内容不在考虑周围额外空间。如果设置为auto，额外空间会基于flex-grow值做分布。如下所示：

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin:0;padding:0;}
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:500px;
        }
        #flex_basis div {
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            height:50px;
        }
        #flex_basis {
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:100px;
            flex-flow:wrap;
            justify-content:space-around;
        }
        #flex_basis div:nth-child(2) { flex-basis: 80px;}
        #flex_basis div:nth-child(1) { flex-basis: 50px;}
        #flex_basis div:nth-child(3) { flex-basis: 50px;}
        #flex_basis div:nth-child(4) { flex-basis: 50px;}
        #flex_basis div:nth-child(5) { flex-basis: 50px;}
    </style>
</head>
<body>

<div class="contentitem">
    <h4>flex-basis:number</h4>
    <div id="flex_basis">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
     </div>
</div>
</body>
</html>

image.png

5.flex

flex是flex-grow，flex-shrink，flex-basis三个属性的缩写。第二个和第三个参数是可选值。默认值是0 1 auto。
flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>]
也可以这样用：(感觉跟 flex-grow 用法一样)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       *{ margin:0;padding:0;}
       .contentitem {
           margin:10px auto;
           background-color:#ccc;
           max-width:500px;
       }
       #flex div {
           border:1px solid #00dc50;
           border-radius:2px;
           box-shadow:2px 2px 2px;
           background-color:pink;
           text-align:center;
           padding-top:20px;
           box-sizing:border-box;
           height:50px;
       }
       #flex {
           display:flex;
           border:1px dashed red;
           padding:10px;
           flex-direction:row;
           height:100px;
           flex-flow:wrap;
           justify-content:space-around;
       }
       #flex div:nth-child(2) { flex:2;}
       #flex div:nth-child(1) { flex:1;}
       #flex div:nth-child(3) { flex:1;}
       #flex div:nth-child(4) { flex:1;}
       #flex div:nth-child(5) { flex:1;}
       #flex div:last-of-type { flex:2;}
   </style>
</head>
<body>
<div class="contentitem">
   <h4>flex:number</h4>
   <div id="flex">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>
       <div>6</div>
    </div>
</div>
</body>
</html>

image.png

6.align-self

用来在单独的伸缩项目上覆写默认的对齐方式。
align-self:auto | flex-start | flex-end | center | baseline | stretch
- align-self的值与align-items一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{ margin:0;padding:0;}
        .contentitem {
            margin:10px auto;
            background-color:#ccc;
            max-width:500px;
        }
        .contentitem div div{
            width:50px;
            border:1px solid #00dc50;
            border-radius:2px;
            box-shadow:2px 2px 2px;
            background-color:pink;
            text-align:center;
            padding-top:20px;
            box-sizing:border-box;
            min-height:50px;
        }
        .contentitem > div {
            display:flex;
            border:1px dashed red;
            padding:10px;
            flex-direction:row;
            height:100px;
            flex-flow:wrap;
            justify-content:space-around;
            align-items:center;
        }
        #flex_start div:nth-child(1) { align-self:flex-start;}
        #flex_end   div:nth-child(1) { align-self:flex-end;}
        #center     div:nth-child(1) { align-self:center;}
        #baseline   div:nth-child(1) { align-self:baseline;}
        #stretch    div:nth-child(2) {align-self:stretch;}
    </style>
</head>
<body>
<div class="contentitem">
    <h4>align-self:align-start</h4>
    <div id="flex_start">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
     </div>
</div>
<div class="contentitem">
    <h4>align-self:flex-end</h4>
    <div id="flex_end">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-self:center</h4>
    <div id="center">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-self:baseline</h4>
    <div id="baseline">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
<div class="contentitem">
    <h4>align-self:stretch</h4>
    <div id="stretch">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</div>
</body>
</html>

效果

image.png

各位读者大家好，有什么错误的地方欢迎及时提出意见和建议

最后编辑于：2018.11.21 10:54:25

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,386评论 6赞 479
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,939评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,851评论 0赞 341
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,953评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,971评论 5赞 369
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,784评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,126评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,765评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,148评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,744评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,858评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,479评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,080评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,053评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,278评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,245评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,590评论 2赞 343

css3 弹性伸缩布局盒模型flex

Flex容器属性

1.display

版本表格

2.flex-direction

3.flex-wrap

4.flex-flow

5.justify-content

6.align-items(管理侧轴)

7.align-content(管理侧轴)

Flex项目属性

1.order

2.flex-grow

3.flex-shrink

4.flex-basis

5.flex

6.align-self

各位读者大家好，有什么错误的地方欢迎及时提出意见和建议

推荐阅读更多精彩内容