CSS: flex布局 伪元素 ::before 和 ::after的用法

flex布局

flex表示弹性布局,跟float类似;把页面看成一个个的盒子,它控制这些盒子的排列方式;

1.通过对盒子使用:

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
// 行内元素
.box{
  display: inline-flex;
}

• flex-direction: row（默认值）：主轴为水平方向，起点在左端。| row-reverse：主轴为水平方向，起点在右端。| column：主轴为垂直方向，起点在上沿。| column-reverse：主轴为垂直方向，起点在下沿。
  

• flex-wrap: nowrap(不换行) | wrap(换行) | wrap-reverse(第一行在下面)
  

• flex-flow: 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

• justify-content:
  

• align-items
  flex-start：交叉轴的起点对齐。flex-end：交叉轴的终点对齐。center：交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。
  stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
  

• align-content:
  flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  stretch（默认值）：轴线占满整个交叉轴。
  

伪元素 ::before 和 ::after的用法

是用来给元素添加额外内容的,因为只存在于作用元素内容的前后

必须使用content属性

.box::before{
  content:'';
  height: calc(100% + 24px);
  position: absolute; left: -28px; top: 0;
}

注:非固定值计算 calc

注意点

::before和::after的与伪类的结合使用是有先后顺序的;