理解flexbox（一）-白红宇

理解flexbox（一）

阅读量：5092 次

发布时间：2019-06-13

本文共 3384 字，大约阅读时间需要 11 分钟。

flexbox是什么

根据规范中的描述可知道，flexbox模块提供了一个有效的布局方式，即使不知道视窗大小或者未知元素情况之下都可以智能的，灵活的调用和分配元素和空间两者之间的关系。

如何开始使用flexbox

开始使用flexbox时，你所要做的第一件事情就是声明一个flex容器。比如：

这是一个无序列表ul,里面有三个列表元素li。ul为父元素，li为子元素。要开始使用flexbox，必须先让父元素变成一个flex容器。可以在父元素中显示的设置display：flex或者display:inline-flex。这样就可以开始使用flexbox模块了。

为以上html添加基本样式，如下:

ul{
     display:flex; }li{
     width:100px;  height:100px;  background:red;  margin:10px;  }

效果如下：

一旦显式的设置了display属性的值为flex，无序列表ul就会自动变成flex容器，而其子元素（在本例中是指列表元素li）就变成了flex项目。

关键字：

flex容器：父元素显式设置了display:flex

flex项目：flex容器内的子元素

flex容器属性

flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content

flex-direction

控制flex项目沿着主轴（水平方向）的排列方向，有四个值

row || column || row-reverse || column-reverse:分别是行，列，行的反方向，列的反方向，其中row是默认值。

代码如下：

ul{
        display:flex;       border:1px solid black;     flex-direction: row; //或者 row-reverse || column || column-reverse }li{
       text-align: center;    font-size:20px;    width:100px;    height:100px;    background-color: red;    margin: 10px; }

四中效果如下：

row:

row-reverse:

column:

column-reverse:

flex-wrap

　wrap|| nowrap|| wrap-reverse :其中nowrap是默认值。　　

代码如下：

ul{
         display:flex;        border:1px solid black; 　　　 flex-wrap:wrap  //或者 nowrap || wrap-reverse  }  li{
        text-align: center;     font-size:20px;     width:100px;     height:100px;     background-color: red;     margin: 10px;   }

效果如下:

no-wrap:

wrap:

wrap-reverse:

flex-flow

　flex-flow是flex-direction和flow-wrap两个属性的速记属性。

值可以是：

flex-flow: row wrap

justify-content

定义flex项目在水平方向上的对齐方式，其值：flex-start || flex-end ||center || space-between || space-around，其中flex-start是默认值。

代码如下：

ul{
        display:flex;       border:1px solid black;     list-style: none;     justify-content: space-between; //或者 flex-start || flex-end || center || space-between || space-around 　　　padding-left:0;  }  li{
        text-align: center;     font-size:20px;     width:100px;     height:100px;     background-color: red;     margin: 10px;  }

效果如下:

flex-start:

flex-end:

center:

space-between:

space-around:

align-items

align-items属性类似于justify-content属性。只有理解了justify-content属性，才能更好地理解这个属性。属性值： flex-start|| flex-end || center|| stretch ||baseline,默认值是stretch。

代码如下：

ul{
        display:flex;       border:1px solid black;     list-style: none;     padding-left:0;     align-items: stretch; 　　 height:100px;}li{
        text-align: center;     font-size:20px;     width:100px;     background-color: red;     margin: 10px;}