美文网首页
Flex弹性盒笔记

Flex弹性盒笔记

作者: 老哥深蓝 | 来源:发表于2021-03-31 15:54 被阅读0次

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

弹性容器

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

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

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

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

主轴

侧轴

相关文章

网友评论

      本文标题:Flex弹性盒笔记

      本文链接:https://www.haomeiwen.com/subject/xymohltx.html