阅读 7406

关于flex布局的应用

什么是flex布局?

Flex是Flexible Box的缩写,意味"弹性布局",任何一个容器都可以指定为Flex布局

flex的基本概念?

  • Flex布局元素,称为Flex容器,简称"容器"。它的所有子元素自动成为容器元素,简称"项目"。
  • 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的排列方式:从左到右;交叉轴的排列方式:从上到下;
    cmd-markdown-logo

容器的属性

1、flex-direction :属性决定主轴的方向 (即项目的排列方式)

flex-direction:row (主轴水平方向,起点在左端)

cmd-markdown-logo
cmd-markdown-logo

flex-direction:row-reverse (主轴水平方向,起点在右端)

cmd-markdown-logo
cmd-markdown-logo

flex-direction:column (主轴垂直方向,起点在上沿)

cmd-markdown-logo
cmd-markdown-logo

flex-direction:column-reverse (主轴在垂直方向,起点在下沿)

cmd-markdown-logo
cmd-markdown-logo

2、flex-wrap : 默认情况下,项目都排在一条线(又称"轴线"上)

flex-wrap:nowarp (不换行,默认的)

cmd-markdown-logo
cmd-markdown-logo

flex-wrap:wrap (换行,第一行在上面)

cmd-markdown-logo
cmd-markdown-logo

flex-wrap:wrap-reverse (换行,第一行在下面)

cmd-markdown-logo
cmd-markdown-logo

3、flex-flow:是flex-direction 属性和flex-wrap属性的简写,默认值row、nowrap

4、justify-content:属性定义了项目在主轴上的对齐方式

justify-content:flex-start (左对齐,默认值)

cmd-markdown-logo
cmd-markdown-logo

justify-content:flex-end(右对齐)

cmd-markdown-logo
cmd-markdown-logo

justify-content:center (居中)

cmd-markdown-logo
cmd-markdown-logo

justify-content:space-between (两端对齐,项目之间的间隔相等)

cmd-markdown-logo
cmd-markdown-logo

justify-content:space-around (每个项目两侧的间距相等)

cmd-markdown-logo
cmd-markdown-logo

5、align-items :定义项目交叉轴上如何对齐(单行)

align-items:flex-start (交叉轴起点对齐)

cmd-markdown-logo
cmd-markdown-logo

align-items: flex-end (交叉轴终点对齐)

cmd-markdown-logo
cmd-markdown-logo

align-items:center (垂直方向,中间开始)

cmd-markdown-logo
cmd-markdown-logo

align-items:baseline (项目第一行文字的基线对齐)

cmd-markdown-logo
cmd-markdown-logo

align-items:stretch (默认值,如果项目未设置高度或设为auto,将占满整个容器的高度)

cmd-markdown-logo
cmd-markdown-logo

6、align-content :多行轴线对齐(用法同align-items )

flex项目属性

1、order 定义项目排列顺序

order:number (数值越小越靠前,默认为0)

cmd-markdown-logo
cmd-markdown-logo

2、flex-grow 定义项目放大比例

flex-grow :number(默认0,如果有剩余空间也不放大,值为1放大,2是1的双倍大小,此类推)

cmd-markdown-logo
cmd-markdown-logo

3、flex-shrink 定义项目缩小比例

flex-shrink :number (默认为1,如果空间不足则会缩小,值为0不能缩小)

cmd-markdown-logo
cmd-markdown-logo

4、flex-basis 定义项目自身大小

flex-basis :number/auto (默认auto,可设置固定的值50px/50%)

cmd-markdown-logo
cmd-markdown-logo

5、flex:属性是flex-grow,flex-shrink ,flex-basis的简写,默认值为0、1、auto

6、align-self 项目自身对齐

align-self :auto | flex-start | flex-end | center | baseline | stretch

cmd-markdown-logo
cmd-markdown-logo

关注下面的标签,发现更多相似文章
评论