FlexBox 弹性盒子 学习记录

css 向 108

Flexbox 也算有比较多的属性，把它们记录一下，方便以后查看。
 Flexbox 有两个轴，水平方向为主轴（main axia），竖直方向为辅轴，或称交叉轴（cross axis），左上为起点（start），右下为终点（end），类似于数学上的第四象限。
 本文中的方向默认为 LTR （left to right）排版也就是从左向右为正方向的排版模式。

容器属性

容器属性都要写在父元素上。
 容器属性一共有6个：
 *flex-direction 子项目的排列方向
 *flex-wrap 子项目换行方案
 *flex-flow 前两个属性的简写
 *justify-content 子项目沿主轴对齐方案
 *align-item 子项目沿辅轴对齐方案
 *align-content 多轴线沿辅轴对齐方案

首先要为父容器设置 display:flex或display:inlin-flex

flex-diretion

控制父容器内部项目的排列方向，
 默认为 flex-direction:row，表示从左向右水平排列
 可选值为：

  • row-reverse ：从右向左水平排列
  • column：从上到下竖直排列
  • column-reverse：下到上竖直排列

flex-wrap

默认情况下，子项目都排在一条线（只有一条轴线）上，flex-wrap属性定义，如果一条轴线排不下，如何换行。
 默认为flex-wrap:nowrap,表示单行显示（也就是不换行），这时候每个子项目的宽度会被按比例压缩。
 可选值为：

  • wrap 换行显示，第一行在上多出来的子项目在下。
  • wrap-reverse 换行显示，第一行在下（仍然是从左向右排序）。

简写方式:flex-flow

flex-flow是用于同时设定flex-diretion和flex-wrap属性的简写方法，也是推荐写法
 默认值为：flex-flow:row nowrap
可以只写一个值，也可以同时写两个值，第一个值规定了flex-diretion，第二个值规定了flex-wrap,两个值用空格隔开。
 只传入一个值的时候，会自动判断该值用于规定什么属性。

justify-content

用于规定主轴方向的子项目的对齐方式
 默认值为justify-content:flex-start,表示：子项目沿主轴起始位置靠齐（左对齐）。
 其他可选值为：

  • flex-end：子项目沿主轴结束位置靠齐（右对齐）。
  • center：沿主轴的中间位置靠齐（居中）。
  • space-between：子项目会平均地分布在行里。第一个子项目位于主轴起点位置，最后一个子项目在主轴终点位置。
  • space-around：子项目会平均地分布在行里，两端保留「子项目间距的一半」的空间。

align-items

和 justisy-content类似，其规定了辅轴方向子项目的对齐方式
 默认值为justify-item:stretch 表示：如果项目未设置高度或设为auto，将占满整个容器。
 其他可选值为：

  • flex-start：与辅轴的起点对齐（顶端对齐）。
  • flex-end：与辅轴终点对齐（底端对其）。
  • center：与辅轴轴的中点对齐（竖直居中）。
  • baseline: 项目的第一行文字的基线对齐。

align-content

定义了多根轴线的对齐方式，如果只有一根轴线（也就是flex-wrap:nowrap），该属性不起作用，与justify-content类似。
 默认值为：stretch（默认值）表示轴线占满整个容器
 其他可选值为：

  • flex-start：与辅轴的起点对齐（顶端对齐）。
  • flex-end：与辅轴终点对齐（底端对其）。
  • center：与辅轴轴的中点对齐（竖直居中）。
  • space-between：与辅轴两端对齐，轴线之间的间隔平均分布。
  • space-around：轴线会平均地分布在行里，两端保留「轴线间距的一半」的空间。

项目属性

项目属性一共6个

  • order 子项目的序列号
  • flex-grow 子项目的放大比例
  • flex-shrink 子项目的收缩比例
  • flex-basis 分配多余空间之前，项目占据的主轴空间
  • flex 上面三个flex开头的属性的简写
  • align-self

order

子项目的序列号，值是一个无单位的整数，数值越小，排列越靠前，序列号可以为负数。
 默认为：0

flex-grow

用来定义子项目的放大比例，值是一个无单位的整数。
 默认为 0，表示即时有剩余空间，也不放大。
 如果所有的子项目的flex-grow值都相同(比如都是1)，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink

用来定义子项目的收缩比例，值是一个无单位的整数，和flex-grow类似，负值对该属性无效
 默认为 1，即如果空间不足，该项目将缩小。
 flex-shrink属性为0，则空间不足时，也不缩小。
 如果所有子项目flex-shrink属性都为0,并且子项目宽度之和大于容器宽度，那么子项目会撑破容器。

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
 默认值为:auto,表示项目本来的大小。
 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

re### flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

用法基本和align-items相同，可覆盖align-items属性。
 默认值为auto，表示继承父元素的align-items属性
 如果没有父元素，则等同于stretch。
 其他可选值为：

  • flex-start：与辅轴的起点对齐（顶端对齐）。
  • flex-end：与辅轴终点对齐（底端对其）。
  • center：与辅轴轴的中点对齐（竖直居中）。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch: 如果项目未设置高度或设为auto，将占满整个容器 
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Comments
Write a Comment