css flex布局的相关使用总结
1、我们先看看不使用flex之前的html展示效果，body代码：<body><div > <div>baidu</div> <a href="#">python</a> <span>java</span> <span>c#</span> <span>go</span></div</body>打开这个html页面我们可以看到如下图二效果，div里面的div将占据一行，导致换行，而且布局乱。
2、首先要使用flex，我们必须首先在父容器中写入：style="display: flex" 这样就代表着将使用flex布局外层div：<div style="display: flex">我们会发现里面的显示发生了变化，子层div不在换行，刷新页面如下图所示
3、仅仅实现不换行是不够的，也许我们需要都换行呢，如果都要换行的话，我们只需要外层div样式这样写：<div style="display: flex;flex-direction: column">没错flex-direction加入属性数将控制着变化，flex-direction有以下几个属性row：主轴为水平方向，起点在左端。（默认值）row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。如下代码刷新页面将如下图二所示
4、有时候使用了flex布局，所有子类都在一行，容器又太小，这时候我们就需要对它们进行换行 如下图一所示flex-wrap属性将为我们实现该功能我们对div进行修改<div style="font-size:100px;display: flex;flex-direction: row;flex-wrap: wrap"> <div >baidu</div> <a href="#">python</a> <span>java</span> <span>c#</span> <span>go</span></div>刷新页面将如图二所示flex-wrap有三个属性nowrap：不换行（默认）wrap：换行wrap-reverse：换行，第一行在下方 修改div样式style="font-size:100px;display: flex;flex-direction: row;flex-wrap:wrap-reverse"刷新页面如图四所示：
5、如果我们要基于容器，把里面的内容放大缩小呢，那就使用flex-grow属性默认为0，如果存在剩余空间，也不放大修改代码如下：<div style="font-size:50px;display: flex;flex-direction: row;"> <div >baidu</div> <a style="margin-left: 10px;flex-grow:9" href="#">python</a> <span style="margin-left: 10px">java</span> <span style="margin-left: 10px" >c#</span> <span style="margin-left: 10px">go</span></div>刷新页面如下图一所示：
6、felx的 align-items属性，align-items属性定义子类交叉轴的对齐方式。align-items属性：flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch：如果项目未设置高度或设为auto，将占满整个容器的高度（默认值）
7、justify-content属性定义了项目在主轴上的对齐方式。justify-content属性：flex-start：左对齐（默认值）熠硒勘唏flex-end：右对齐center： 居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。例如<div style="width:100%;font-size:50px;display: flex;flex-direction: row;justify-content:space-around"> <div style="" >baidu</div> <div style="margin-left: 10px;-webkit-flex: 1; /* Safari 6.1+ */flex: 1;">python</div> <div style="margin-left: 10px;">java</div> <div style="margin-left: 10px;">c</div> <div style="margin-left: 10px;">go</div> <div style="margin-left: 10px;">basic</div></div>效果如下图二所示：
