有趣的Flex布局

　　对于刚接触前端的小白，在还原页面样式的时候，往往会遇到页面布局（layout）上的问题，用着生硬的padding来固定盒子的位置，不仅代码看的沉重，还得适应各种浏览器页面，始终没有办法做到统一。接下来，我来介绍一种能把布局写活的方法：Flex布局。

　　Flex布局是Flexible Box的缩写，意思是弹性布局。设为flex布局后，子元素的float（浮动）、clear（清除浮动）和vertical-align（垂直对齐方式）属性会失效。

　　采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。任何一个容器都可以指定为Flex布局（块级元素和行级元素）。

　　Flex有以下六种属性：

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

flex-direction属性

　　flex-direction属性决定主轴方向，分别有四个值：row（默认值，左=>右）row-reverse（右=>左）column（上=>下）column-reverse（下=>上）。

　　当我们在容器里写入flex布局：display：flex，flex-direction属性会默认为row：
```
.father{
    display: flex;
    background-color: rgb(192, 185, 185);
}
```
　　它的子元素我设置了四个：a,b,c,d（宽为200px，高为50px，颜色不同）。页面效果为下：

　　改变flex-direction属性的值：row-reverse，页面效果改变为：

　　当flex-direction属性的值变为column时，效果和不写入flex布局一样，及从上到下；column-reverse时则相反。
flex-wrap属性

　　flex-wrap属性规定了

　当布局内元素一行盛不下，如何换行。flex-wrap属性有三个值：nowrap（默认，不换行）wrap（第一行在上）wrap-reverse（第一行在下）。

　　同样是上面的例子，我把每个元素的宽度设置为500px，页面渲染为下：

　　打开布局我们看到：

　　它的样式自动调成页面可容纳宽度，这就是当flex-wrap属性nowrap默认下的效果。改变flex-wrap属性的值为wrap时，页面效果为下：

　　当第一行放不下时，转到第二行继续，依次排列。改变flex-wrap属性的值为wrap-reverse时，页面效果为下：

　　排列顺序为从左到右，从下到上，最后一行放不下，转到倒数第二行，依次排列。
flex-flow属性

　　flex-flow属性包含flex-direction属性和flex-wrap属性，格式为：
```
.father{
    display: flex;
    flex-flow: row nowrap;
    background-color: rgb(192, 185, 185);
}
```
　　其中row为flex-direction属性的默认值，nowrap为flex-wrap属性的默认值，这两个值视页面需求更改。
justify-content属性

　　justify-content属性定义了布局内元素在水平方向的对齐方式，其有五个值：flex-staet（默认值，左对齐）flex-end（右对齐）center（居中）space-between（两端对齐，元素之间间隔相等）space-around（每个元素两侧间隔相等）。

　　justify-content属性往往用在页面右侧按钮，输入框、图片等元素对齐方式。

　　在我接触的项目里，需要很多放置在页面右侧的按钮，如“新建”按钮，“删除”按钮等，此时我就会用justify-content属性调整按钮的位置，例如：
```
<div class="father">
    <button>新建</button>
</div>
```
　　这是一个新建按钮，我需要把它放置到页面的右侧，则我需要设置这个盒子的justify-content属性：
```
.father{
    display: flex;
    justify-content: flex-end;
    background-color: rgb(192, 185, 185);
}
```
　　此时按钮就出现在页面右侧。若按钮所在的同一水平的左侧有其他的元素，则可以改变justify-content属性的值为space-between，为下：
```
<div class="father">
        <div class="a">a
        </div>
        <button>新建</button>
</div>



.father{
    display: flex;
    justify-content: space-between;
    background-color: rgb(192, 185, 185);
}
```
　　页面效果为下：

　　然后改改样式就好了。

　当使用space-around值时，系统会自己分析页面的宽度以及每个元素对应的位置，如果对页面效果不满意，还可以用padding设置间距。
align-items属性

　 align-items属性定义布局里的元素在垂直水平的对齐方式。align-items属性有五个值：stretch（默认值，未设置高度时与父元素高度相同）flex-start（垂直向上对齐）flex-end（垂直向下对齐）center（垂直居中对齐）baseline（元素第一行文字对齐）

　当布局里的每个元素设置了不同的高度时，align-items属性默认值会变为flex-start，效果为下：

　　我设置了父元素高度为300，子元素a,b,c,d高度分别为100，120，40，200。默认为向上对齐。当值变为center时，效果为下

　为了实现文字对齐，我给这些元素设置了margin-top，分别为20，50，10，30。改变align-items的值为baseline，效果为下：

　　设置padding-top也可以，但是会改变原来元素的高度。
align-content属性

　　　　　若布局容器内有多行元素，则align-content属性起作用，若只有一行元素，则align-content属性不起作用。

　　　　　 align-content属性有六个值：stretch（默认值，所有行占满整个布局）flex-start（于布局顶部对齐）flex-end（于布局底部对齐）center（于布局高度中心对齐）space-between（于顶部和底部对齐，元素间隔相等）space-around（元素上下间隔相等）

　　　　　 align-content属性与justify-content属性类似，一个是水平对齐，一个是垂直对齐。

posted @ 2019-07-09 13:00 计算机-前端小白阅读(378) 评论(0) 编辑收藏举报

刷新页面返回顶部

计算机-小白

有趣的Flex布局

公告