flex元素的使用

认识flex布局

flex布局(Flexible布局,弹性布局)

目前特别在移动端用的多,目前PC段也使用的越来越多了。

两个重要的概念

  • 开启了flex布局的元素叫flex container
  • flex container 里面的直接元素叫做flex items

设置display属性为flex或者inline-flex可以成为flex container

  • flex:flex container以block-level形式存在。 块级元素
  • inline-flex: flex container以inline-level形式存在。 行内元素

flex布局中的两个轴

主轴 main axis

交叉轴 cross axis

flex-direction:决定主轴的方向

  • row : 从左到右
  • row-reverse : 翻转,倒叙
  • column: 主轴从上到下
原文地址:https://www.cnblogs.com/ch2020/p/14868586.html