CSS-基础(四)

CSS学习笔记（四）

Flex 弹性布局

display 弹性盒子声明

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

.container {
  display: flex; /* or inline-flex */
}

内部排列方式 flex-direction

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Note: flex-direction默认为row

包裹方式 flex-wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Note: 默认情况下，如果盒内元素溢出，则会尽可能的挤进一行

flex-flow

it is the shorthand for the flex-direction and flex-wrap properties

• Note: 默认值为flex-flow:row nowrap;

主轴排列 justify-content

• space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
• space-around: items之间添加相等间隙，但是两个items之间的间隙不会重叠，因此排列在容器内边缘的间隙会比内部间隙小一倍
• space-evenly: 为内部items平局分配间隙，两个items之间的间隙会重叠

交叉轴的排列 align-items

• stretch (default): stretch to fill the container (still respect min-width/max-width)=>item宽高属性优先级高于stretch
• flex-start / start / self-start: items are placed at the start of the cross axis.
• flex-end / end / self-end: items are placed at the end of the cross axis.
• center: items are centered in the cross-axis
• baseline: items are aligned such as their baselines align

多行交叉轴的排列 align-content

• stretch (default): lines stretch to take up the remaining space.

  Note: this property has no effect when there is only one line of flex items.

控制单个item 交叉轴

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Note: float, clear and vertical-align have no effect on a flex item.

控制单个 item 的空间（对剩余空间的填充）

flex-grow

.item2 {
  flex-grow: 2; /* default 0  Negative numbers are invalid.*/ 
}

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least). 即使该item设置了宽度

与之相对的 flex-shrink是如果空间不够，将该item尽可能的缩放

flex-basis

定义了该item对剩余空间分配前的尺寸. It can be a length (e.g. 20%, 5rem, etc.) or a keyword.

The auto keyword means “look at my width or height property”

Note: 优先级顺序max-width,min-width > flex-basis > width

.item {
  flex-basis:  | auto; /* default auto */
}

flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional.

The default is 0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

控制单个 item order

.item{order:99} //default:0; 从小到大顺序排列