css布局代码片段

2019独角兽企业重金招聘Python工程师标准>>>

弹性盒子flex布局相关属性

说明

1、弹性盒子由弹性容器和弹性子元素组成 2、弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 3、弹性容器内包含了一个或多个弹性子元素。

常用属性

1. flex-direction 子元素的排列方式 row | row-reverse | column | column-reverse flex-direction 指定了弹性子元素在父容器中的显示顺序 flex-direction: row /row-reverse /column / column-reverse row：横向从左到右排列（左对齐），默认的排列方式。 row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 column：纵向排列。 column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

2. align-items:flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

Css 3盒子模型的种类

box-sizing: content-box;

box-sizing: border-box;

box-sizing其它的值

• content-box
  • 描述：在宽度和高度之外绘制元素的内边距和边框。
• border-box
  • 描述：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制
• inherit
  • 描述：继承 父元素 box-sizing属性的值

转载于:https://my.oschina.net/momomo1987/blog/1843393