CSS温习回顾-弹性盒Flex

CSS温习回顾

CSS-Flex

1. 弹性盒简介

   弹性盒也可以称为伸缩盒，是CSS中一种布局手段，它可以代替浮动来完成页面的布局；flex在移动端兼容性强，但是PC端兼容性可能较差，一般能用flex，尽量不要用浮动；

   弹性盒使得元素具有弹性，让元素可以随着页面的大小改变而改变，可以避免浮动带来的影响；

   弹性盒必须包含弹性容器和弹性元素；

   设置弹性盒后，行内元素也可以设置宽高；

   弹性容器：要使用弹性盒，必须将一个元素设置为弹性容器，可以通过display设置弹性容器；

   ​ —display:flex;：设置块级弹性容器；

   ​ —display:inline-flex;：设置行内弹性容器；

   弹性元素：弹性容器的直接子元素是弹性元素，或者称为弹性项，注意弹性容器中除了子元素外其他后代元素都不称为弹性元素！！

   一个元素可以同时是弹性元素和弹性容器；

2. 弹性容器

   弹性容器的相关属性：

   —flex-direction：设置弹性容器中弹性元素的排列方式；

   ​ —可选值：

   ​ —row：默认值，弹性元素水平排列（主轴：自左向右）；

   ​ —row-reverse：弹性元素反向水平排列（主轴：自右向左）；

   ​ —column：弹性元素垂直排列（主轴：自上向下）；

   ​ —column-reverse：弹性元素反向垂直排列（主轴：自下向上）；

   ​ —主轴：弹性元素的排列方向称为主轴；

   ​ —侧轴（辅轴）：与主轴垂直方向的称为侧轴；

   —flex-wrap：设置弹性元素是否在弹性容器中自动换行；

   ​ —可选值：

   ​ —nowrap：默认值，元素不会自动换行；

   ​ —wrap：元素沿着侧轴方向自动换行；

   ​ —wrap-reverse：元素沿着侧轴反向自动换行；

   —flex-flow：flex-direction和flex-wrap的简写属性，无顺序要求；

   例如：flex-flow:row wrap;

   —justify-content：设置主轴上多余空白空间位置排列方式；

   ​ —可选值：

   ​ —flex-start：默认值，元素沿着主轴起边排列，全部空白都在容器主轴终边位置；

   ​ —flex-end：元素沿着主轴终边排列，全部空白都在容器主轴起边位置；

   ​ —center：元素沿着主轴居中排列，全部空白平均分配在容器主轴的两边；

   ​ —space-around：空白分配在弹性元素的两侧；

   ​ —space-evenly：空白分配在弹性元素的单侧；

   ​ —space-between：空白均匀分配在元素