布局神器flex

flex

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性

用法

设置在父元素上的属性

  1. flex-direction ---决定项目的排列方向,row | row-reverse | column | column-reverse
  2. flex-wrap ---决定项目是否换行,nowrap | wrap | wrap-revers
  3. flex-flow --- ||
  4. justify-content ---决定项目排列方向上的对齐方式,
    1) flex-start
    2) flex-end
    3) center
    4) space-between 两端对齐
    5) space-around 子容器沿主轴均匀分布,位于首尾两端的子容器到父容器的距离是子容器间距的一半。
  5. align-items ---决定垂直轴上的对齐方式,flex-start | flex-end | center | baseline | stretch
有坑,记得父元素高度
  1. align-content ---决定多列或多行垂直轴上的对齐方式,flex-start | flex-end | center | space-between | space-around | stretch
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

设置在子元素上的属性

  1. order ---决定项目的排列顺序,数值越小,排列越靠前,默认为0,
  2. align-self ---决定单个项目与其他项目不一样的对齐方式,可覆盖align-items属性,默认值为auto,auto | flex-start | flex-end | center | baseline | stretch
  3. flex ---none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  4. flex-grow ---决定项目的放大比例,默认为0,
  5. flex-shrink ---决定项目的缩小比例,默认为1,
  6. flex-basis ---决定在分配多余空间之前,项目占据的空间,默认值为auto, | auto
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto

多行多列布局

flex+width%

.box {
   display: flex;
   flex-wrap: wrap;
 }
.item {
    width: 20%;
 }

多行布局最后一行左对齐

1.添加几个与元素等宽的元素

2.after

.box:after {
    content: "";
    flex: auto;
 }

.box:after {
    content: "";
    flex: 0 1 50%;
 }

参考链接:
一劳永逸的搞定 flex 布局
写给自己看的display: flex布局教程
让CSS flex布局最后一行列表左对齐的N种方法

你可能感兴趣的