Flex布局

1.flex-flow属性*

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

.box {

  flex-flow: <flex-direction> || <flex-wrap>;

}

2.justify-content属性

取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。

.box {

 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

}

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

space-evenly：为项目之间间距与项目与容器间距相等 很少用到

 

 

 

space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。

 

space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。

*space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

 

这是我所学到的Flex布局，所以我要分享给你们，希望可以帮助到你们。

 

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！