Flex布局常用属性简单总结:

常用布局方式也就是float,但flex布局更适合移动端项目开发:
参考Flex布局

1,布局方式


  display: flex;
  
  display: -webkit-flex; /* Safari */
  
a.横向纵向布局:
  
  flex-direction: row | column  | row-reverse | row-reverse;

b. 比例布局:默认0
 
 flex-grow: 0 |  1  |   2  |

flex-shrink:设置为0,则即便空间不够,自身也不缩小.

c.允许换行flex-wrap:
  
flex-wrap:nowrap(默认) | wrap | wrap-reverse

wrap-reverse第一排会紧贴容器底部

2,居中


justify-content:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly

align-items:flex-start | flex-end | center | baseline | stretch(默认)

多行对齐方式:

align-content:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

继承父容器的align-items属性:

align-self:auto(默认) | flex-start | flex-end | center | baseline | stretch


space-between:左右两侧项目都紧贴容器

space-around :项目之间间距为左右两侧项目到容器间距的2倍

项目之间间距与项目与容器间距相等,相当于除去项目宽度,平均分配了剩余宽度作为项目左右margin

baseline:项目以第一行文字的基线为参照进行排列。


3,排列顺序

order决定项目排列顺序,数值越小,项目排列越靠前

order:0

剩余空间的情况下是否放大

更多布局Grid

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页