设置div伸缩盒子 - 码农教程

Flex容器属性

display

　　要改变元素的模式为伸缩容器，需要使用display属性。

display:flex | inline-flex
/*flex:设置为块级伸缩容器。
　　inline-flex:设置为内联级伸缩容器。*/

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    *{
        margin:0;
        padding:0;
    }
    div>div{
        width:100px;
        height:100px;
        line-height:100px;
        border:1px solid;
        text-align:center;
        margin:10px;
    }
    #box{
        display:-moz-box;
        display:-webkit-box;
        display:-ms-flexbox;
        display:-webkit-flex; 
        display:flex;     
        border:1px solid;
        margin:20px;
    }
    #inline{            
        display:-moz-inline-box;
        display:-webkit-inline-box;
        display:-ms-inline-flexbox;
        display:-webkit-inline-flexbox;
        display:inline-flex;
        border:1px solid;
        margin:20px;
    }
</style>
</head>
<body>
<div id="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>
<div id="inline">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>
</body>
</html>

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

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-wrap

　　默认情况下，Flex项目都尽可能在一行显示，你可以根据flex-wrap的属性值来改变，让Flex项目多行显示。

flex-wrap:nowrap | wrap | wrap-reverse
/*nowrap:默认值，单行显示，如果书写方式是ltr，Flex项目从左往右排列；如果书写方式是trl，Flex项目从右往左排列。
　　wrap:多行显示，如果书写方式是ltr，Flex项目从左往右排列；如果书写方式是trl，Flex项目从右往左排列。
　　wrap-reverse:多行显示，如果书写方式是ltr，Flex项目从右往左排列；如果书写方式是trl，Flex项目从左往右排列。*/

justify-content

　　用来设置伸缩项目在主轴上的对齐方式。指定如何在伸缩项目之间分布伸缩容器额外空间。当一行上的所有伸缩项目不能伸缩或可伸缩但是已达到最大长度时，这一属性才会对伸缩容器额外空间进行分配。当伸缩项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

justify-content:flex-start | flex-end | center | space-between | space-around
/*flex-start:默认值，伸缩项目向一行的起始位置靠齐。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的末尾。
　　flex-end:和flex-start相反，伸缩项目向一行的结束位置靠齐。伸缩容器沿着布局轴方向的所有额外空间都被置于布局轴的开始。
　　center:伸缩项目向一行的中间位置靠齐。伸缩容器的所有额外空间平均分布在第一伸缩项目前面和最后一个伸缩项目的后面。
　　space-between:伸缩项目会平均分布在行里。伸缩容器的所有额外空间平均分布在所有伸缩项目之间，但是在第一个伸缩项目之前和最后一个伸缩项目之后不分配空间，也就是说，第一个伸缩项目靠齐开始位置，最后一个伸缩项目靠齐结束位置。
　　space-around:伸缩项目会品均分布在行里。伸缩容器的所有额外空间品均分布在所有伸缩项目之间，但是第一个伸缩项目之前与最后一个伸缩项目之后只分配其他位置得到额外空间的一半。*/

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属性的限制下尽可能接近所在行的尺寸。*/

align-content

　　是伸缩项目占多行时在侧轴方向的对齐属性，这个属性将对每一行起作用而不是每个伸缩项目。

align-content:flex-start | flex-end | center | space-between | space-around | stretch
/*flex-start:各行向伸缩容器的起点位置堆叠。
　　flex-end:各行向伸缩容器的结束位置堆叠。
　　center:各行向伸缩容器的中间位置堆叠。
　　space-between:各行在伸缩容器中平均分布。
　　space-around:各行在伸缩容器中品均分布，在两边各有一半空间。
　　stretch:默认值，各行将会伸展以占用额外空间。*/

原文地址：https://www.cnblogs.com/1500418882qqcom/p/13226970.html