一劳永逸搞定Flex布局

FlexBox布局FlexBox是什么意思呢？弹性盒模型（The Flexible Box Module）,又叫Flexbox (flexible box)，意为“弹性布局”，旨在通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间；Flexbox在布局中能够更简化解决什么问题？例如浮动布局、屏幕的适配、水平和垂直居中、自动分配宽度。在CSS中，常规的布局是基于块和内联流方向，而Flex布局是基于flex-flow流,下图很好解释了Flex布局的思想：main axis(主轴): flex 容器的主轴，?flex item?沿着主轴排布，注意主轴不一定是水平的，主轴是水平还是垂直取决于 flex-direction 属性。cross axis (交叉轴): 垂直于主轴的轴线，其方向取决于主轴方向。main size: ?flex item?占据主轴的宽度或高度。?flex item?的main size属性是要么是“宽度”，要么是“高度”，这取决于主轴方向。cross size: ?flex item?占据交叉轴的宽度或高度。?flex item?的cross size属性是要么是“宽度”，要么是“高度”，这取决于交叉轴方向。main-start|main-end: 分别表示主轴的开始位置和结束位置，?flex item?在容器中会从main-start到main-end排布。cross-start|cross-end: 分别表示交叉轴的开始位置和结束位置。?flex item?在交叉轴上的排布从cross-start开始位置到cross-end结束位置。理解了基本概念,下面带大家一起来了解Flex布局父容器的6大属性开启Flex布局想使用Flex布局, 首先要将父容器设置成Flex容器.container?{display:?flex | inline-flex;}这样可以分别设置父容器为块状flex容器或行内flex容器,接下来就可以开启父容器属性学习之旅了父容器属性父容器有以下六大属性：flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content?1. flex-direction?flex-direction属性指定了内部元素在 flex 容器中主轴方向是如何布局的，主要有以下四个属性 默认为row 1 2 3 .container?{display:?flex;flex-direction: row | row-reverse | column | column-reverse;}实现效果：设置flex-item以左侧为起点从左向右横向排列可以设置row设置flex-item以右侧为起点从右向左横向排列可以设置?row-reverse设置项目以上沿为起点从上向下纵向排列可以设置?column设置项目以下沿为起点从下向上纵向排列可以设置?column-reverse?2. flex-wrap?flex-wrap属性表示当主轴的长度是固定并且空间不足的时候，是否可以换行。默认为no-wrap 1 2 3 4 5 .container?{display:?flex;flex-wrap: no-wrap | wrap | wrap-reverse;}实现效果：设置flex-item在主轴方向上不换行?no-wrap (*当主轴的长度是固定并且空间不足时，项目尺寸会随之进行调整，而不会换行)设置flex-item在主轴方向上换行?wrap设置flex-item在主轴方向上反向换行?no-wrap?3. flex-flow?flex-flow属性是将两个属性 flex-direction 和 flex-wrap 组合为简写属性 第一个指定的值为flex-direction, 第二个指定的值为flex-wrap, 默认为:flex-flow: row nowrap;该属性的书写格式如下：.container?{display:?flex;flex-flow: ;}?4. justify-content?justify-content属性是Flex布局flex-item延主轴方向的对齐方式, 默认为flex-start 1 2 3 .container?{display:?flex;flex-direction:?row;justify-content: flex-start | flex-end | center | space-between | space-around;}实现效果：(以水平方向为主轴进行举例，即flex-direction: row)设置flex-item延主轴方向左对齐可以设置 flex-start(默认对齐方式)设置flex-item延主轴方向右对齐可以设置 flex-end设置flex-item延主轴方向居中对齐可以设置 center设置flex-item延主轴方向两端对齐且等间距，可以设置space-between设置flex-item延主轴方向每个flex-item两侧间距相等，可以设置space-around；这种对齐方式也会导致每个flex-item之间的间距比flex-item距离边框的间距大一倍。?5. align-items?align-item属性是指定flex-item在容器的交叉轴上对齐方式。默为flex-start 1 2 3 .container?{display:?flex;flex-direction:?row;align-item: flex-start | flex-end | center | space-between?| space-around;}实现效果：(以水平方向为主轴进行举例，即flex-direction: row)设置flex-item延交叉轴方向上对齐可以设置?flex-start(默认对齐方式)设置flex-item延交叉轴方向下对齐可以设置?flex-end设置flex-item延交叉轴方向居中对齐可以设置?center设置flex-item延交叉轴方向且第一个flex-item文字基线对齐可以设置?baseline如果项目未设置高度或设为auto,flex-item沿着侧轴被拉伸至容器的高度,可以设置 stretch?6. align-content?align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 1 2 3 4 5 6 7 .container?{display:?flex;flex-direction:?row;flex-wrap:?wrap;align-content: stretch | flex-start | flex-end | center | space-between | space-around;}实现效果：(以水平方向为主轴且可以换行进行举例，即flex-direction: row;flex-wrap: wrap;)stretch为该属性的默认值,轴线占满整个交叉轴(flex-item无固定高度)延交叉轴开始位置开始填充设置为 flex-start延交叉轴结束位置开始填充设置为 flex-end与交叉轴居中点对齐设置为 center与交叉轴两端对齐，轴线之前的间隔平均分布可设置 space-between设置 space-around 会使每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框的间隔大一倍以上Flex布局父容器的属性就介绍完毕了,关注「之家前端共享」, 下一篇带你了解Flex布局中子元素flex-item的属性