Flex弹性盒笔记

Flex(弹性盒)是CSS中的新布局手段,它主要用来代替浮动来完成页面的布局。
Flex可以使元素具有弹性,让元素可以跟随页面的大小而改变

弹性容器

要使用弹性盒,必须先将一个元素设置为弹性容器。
可以通过Display来设置弹性容器

display:flex  //设置为块级弹性容器
display:inline-flex //设置为行内弹性容器
弹性元素

弹性容器的直接子元素是弹性元素,后代不是弹性元素。
一个元素可以同时是弹性容器和弹性元素。

flex-direction
指定容器中弹性元素的排列方式。
row:默认值,弹性元素在容器中水平排列。
row-revers:弹性元素在容器中反向水平排列。
column:弹性元素纵向排列
column-reverse:弹性元素纵向反向排列。

主轴

侧轴

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容