CSS3伸缩布局Flex学习笔记

时间:2023-11-28 14:48:38

如果需要使用伸缩布局首先得把display:flex;对于兼容还得加前缀display:-webkit-display:flex;等其他浏览器前缀,但我本机Chrome测试已经不需要加前缀了,其实这些还好,关键移动端竟然不支持这个属性,移动端支持的还是老版本的display:-webki-box;不过对于学习来说,也不管它支持不支持了,学了再说吧,更何况Chrome已经把flex的前缀去了,说明flex多少还是有些稳定的。

下面列出了关于CSS与flex一起使用的一些属性

    • display 显示方式

    • flex-direction 设置flex模型的方向

    • justify-content 设置水平方向的对齐

    • align-items 设置垂直方向的对齐

    • flex-wrap 是否换行

    • align-content 设置换行后的对齐方式

    • flex-flow 简写flex-direction和flex-wrap

    • order 指定顺序

    • align-self 覆盖容器的对齐项目属性

    • flex 指定长度

注意如果设置了宽度盒子是固定的。

弹性盒模型可以设置成·flex 或 inline-flex

display:flex

CSS3伸缩布局Flex学习笔记

注意这个被固定住了,默认情况下,沿水平轴,从左至右

inline-flex和flex的效果是一样的,也没弄个所以然出来。

Flex的方向

  flex-direction:属性指定flex的方向。默认值是row(左到右,顶部到底部)

  其他的值如下:

    •   row-reverse - 从右到左,1在最右边,2倒数第2....
    •   column - 垂直排列
    •   column-reverse - 垂直排列并且逆转

row-reverse

CSS3伸缩布局Flex学习笔记

column

  CSS3伸缩布局Flex学习笔记

column-reverse

  CSS3伸缩布局Flex学习笔记

水平对齐 --justify-content

  可能的值如下:

    •   flex-start- 默认值。被定位在容器的开头
    •   flex-end - 被定位在容器的端部
    •   center - 被定位在容器的中心
    •   space-between - 项目定位与线之间的空间
    •   space-around - 项目是前定位成空间之间,并且所述线后

flex-end

  CSS3伸缩布局Flex学习笔记

center

  CSS3伸缩布局Flex学习笔记

space-between

  CSS3伸缩布局Flex学习笔记

space-around

  CSS3伸缩布局Flex学习笔记

垂直对齐--align-items

  可能的值如下:

    •   stretch- 默认值。项目被拉伸以适应父元素
    •   flex-start - 被定位在容器的顶部
    •   flex-end - 被定位在容器的底部
    •   center - 被定位在容器的中心
    •   baseline - 被定位在容器的基线

stretch

  CSS3伸缩布局Flex学习笔记

flex-start

  CSS3伸缩布局Flex学习笔记

flex-end

  CSS3伸缩布局Flex学习笔记

center

  CSS3伸缩布局Flex学习笔记

baseline

  CSS3伸缩布局Flex学习笔记

如果没有足够的空间指定是否换行--flex-wrap

  可能的值如下:

    •   nowrap- 默认值。不换行
    •   wrap - 换行
    •   wrap-reverse - 以相反的顺序换行

nowrap

  CSS3伸缩布局Flex学习笔记

wrap

  CSS3伸缩布局Flex学习笔记

wrap-reverse

  CSS3伸缩布局Flex学习笔记

内容对齐--align-content

需要配合flex-wrap使用

可能的值如下:

    •   stretch- 默认值。线路延伸到占用的剩余空间
    •   flex-start - 线路都挤满朝着柔性容器的开始
    •   flex-end - 线路都挤满朝着柔性容器的结束
    •   center - 线路都挤满朝着柔性容器的*
    •   space-between - 线条均匀地分布在Flex容器
    •   space-around - 线条均匀地分布在Flex容器,用半角空格的两端

center

  CSS3伸缩布局Flex学习笔记

对这个不是很理解,待研究。

指定项目的顺序--order

给第二个添加 order:-1

  CSS3伸缩布局Flex学习笔记

谁的数大,谁在后面

余量将所有额外的空间被吸收到该元素上--margin-right: auto

  CSS3伸缩布局Flex学习笔记

完美水平垂直居中

  CSS3伸缩布局Flex学习笔记

对每个子项目设置对齐--align-self

flex-start、flex-end、center、baseline、stretch

  CSS3伸缩布局Flex学习笔记

指定项目的范围--flex

2,1,1

  CSS3伸缩布局Flex学习笔记

简写flex-direction 和 flex-wrap --flex-flow

flex-flow: row-reverse wrap;

CSS3伸缩布局Flex学习笔记

这些还多少有些不完善,以后还会更新进来。

本文内容翻译自:http://www.w3schools.com/