Web前端学习 07

前两天除了继续练习写静态页面，还继续学习了 CSS弹性盒模型
目前只学习了部分内容

flex-direction:
指定弹性子元素在父容器中的位置。

语法：

 flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有:

• row：横向从左到右排列（左对齐），默认的排列方式
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。 column：纵向排列。
• column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content:
应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。

语法：

justify-content: flex-start | flex-end | center | space-between | space-around

justify-content的值有：

• flex-start: 默认值。弹性项目向行头紧挨着填充
• flex-end: 弹性项目向行尾紧挨着填充
• center: 弹性项目居中紧挨着填充
• space-between: 弹性项目平均分布在该行上
• space-around: 弹性项目平均分布在该行上，两边留有一半的间隔空间

align-items：
设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

语法：

align-items: flex-start | flex-end | center | baseline | stretch

align-items的值有：

• flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
• center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
• baseline:如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
  stretch: 没咋用过 不太了解。。。

水平垂直居中的的几种方法：

一、flex方法： 适用于需要居中不确定宽高的内容

			display: flex;
            align-items: center; /*垂直居中*/
            justify-content: center; /*水平居中*/

二、position: 适用于居中固定宽高的内容

				top:50%;
				left:50%;
				margin-top: -自身高度的一半;
				margin-left: -自身宽度的一半；

三、 margin:auto

四、…目前我只会三种~

接下来会学习以下html5和css3