flex布局

一月 23, 2021

正篇

1.行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

3.行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

4.inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效）属性。HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。（这句话下面会用例子解释）

div{
  display:block;
  display:inline;
  display:inline-block;
}

开启flex布局

1
2
3

div{
  display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end

div{
  /* 主轴方向 */
  /*       默认 自左向右  自右向左     自上而下   自下而上*/
  flex-direction: row | row-reverse | column | column-reverse;

  /* 是否换行 */
  /*     默认 不换行  换行 首行位于上方  换行 首行位于下方*/
  flex-wrap: nowrap | wrap | wrap-reverse;

  /* flex-flow是flex-direction属性和flex-wrap属性的简写 */
  /* 默认值为 row nowrap */
  flex-flow: <flex-direction> || <flex-wrap>;

  /* 在主轴上的对齐方式 */
  /*       主轴     起始方向对齐 末尾方向对齐 居中对齐     两端对齐     两侧间隔对齐 */
  justify-content: flex-start | flex-end | center | space-between | space-around;

  /* 在交叉轴上的对齐方式 */
  /*     交叉轴 起始方向对齐 末尾方向对齐 居中对齐 第一行文字的基线对齐 未设置高度或设为auto，将占满整个容器的高度  */
  align-items: flex-start | flex-end | center | baseline         | stretch;

  /* 容器中有多个 flex布局时 通过align-content可以统一控制布局方向 */
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  /* flex-start：与交叉轴的起点对齐。
  flex-end：与交叉轴的终点对齐。
  center：与交叉轴的中点对齐。
  space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  stretch（默认值）：轴线占满整个交叉轴。 */
}

容器内部的属性

div{
  /* 排列顺序, 数值越小，排列越靠前，默认为0 */
  order: <integer>;

  /* 分配内部剩余空间，默认为0 */
  /* 数值越大分配的越多，有多个的话会按比例分配，当然这只是剩余空间，没有剩余空间的话该再大也没用 */
  flex-grow: <number>;

  /* 缩小比例，默认为1， 数值越大缩得越小，0的话就是不缩小 */
  flex-shrink: <number>;

  /* 在分配多余空间之前，项目占据的主轴空间 可以设置为不带单位的数值用于表示占比*/
  flex-basis: <length> | auto; 
  /* 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间 */

  /* flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto */
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

  /* 可以设置单个内容的align-items  */
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

查看评论