前端基础之弹性布局

弹性布局

弹性容器

 /* 设置为弹性容器 */

            display: flex; 

弹性子元素

 /* child元素为弹性子元素 ，直接子元素的子元素就不再是弹性子元素*/

        .child{

            width: 200px;

            height: 300px;

            /* margin: 0px auto;可以使主轴元素平均分布 */

设置了display：flex的弹性容器的直接子元素即为弹性子元素

弹性主轴

 /* 设置主轴方向

            row是默认设置即行。多个元素按比例压缩放置在容器中不会换行，

            row-reverse:从右到左

            column是从上到下即列 */

            flex-direction: row;

            /* 设置主轴的内容分布 

            flex-start默认向主轴的开始位置靠拢：

            center主轴元素居中即向主轴的中心位置靠拢

            flex-end向结束靠拢

            space-around：平均分布两边有间距是中间的一半

            space-between：平均分布主轴没有间距（或者在child元素里面用margin：auto也可以使主轴元素平均分布*/

            justify-content: space-around;

设置侧轴方向