每周实习总结之HTML和CSS实战二

   实习的第二个星期还是继续在接触HTML和CSS，可能很多人都是疑惑为什么到现在都没有用到JS；同样我也很纳闷，不过可能是由于业务的原因吧。这个星期还是继续操刀我的HTML和CSS，上个星期公司的前端大佬对我们的页面进行了一番点评；听完简直感觉自己写的页面就是垃圾好嘛。

   于是乎，这个星期尝试在传统布局以外使用一些其他的布局来完成需要写的页面；相信很多同学也以及猜到了-flex布局，这个星期的页面几乎是使用纯flex布局和position定位来完成。没有用到一点浮动的东西，下面来讲讲我学习flex的一些理解吧。

flex布局最早出现于2009年，到目前为止最新的一个草案应该是2018.11月份的；在CSS2.1中定义了四种布局模式；他们分别是：

1.block layout (块级布局) 主要设计被用于document文档

2.inline layout(行内布局)主要被设计用于文本

3.table layout(表格) 主要用于显示二维的表格数据格式

4.positioned layout 定位布局 主要用于在页面中不考虑其他元素的情况下，比较确定的位置

而2009出现的flex布局，官方给出的介绍是： flex layout, which is designed for laying out more complex applications and webpages.我们可以理解为主要可以用于更复杂的应用和页面。而这也正是flex布局相较于其他布局的一个优势，可以用很少的代码从而实现相对较复杂的布局，但flex布局也存在一个问题；flex布局只能兼容IE10以上的浏览器，并且在其他一些低版本的浏览器中还需要使用兼容性的处理；这里暂且不表。因此，如果你的项目或者demo对于IE10以下以及低版本浏览器的兼容性要求不高；那么我们可以尝试使用flex布局来替换掉我们平时的传统布局。相信你会慢慢喜欢上它的。下面这张图是一个比较概括的兼容性表格

关于flex布局我们首先要介绍两个概念:1.flex-container(flex容器) 2.flex-item(flex项目)

关于容器，我最先想到的就是box；盒模型，而我们这里的flex容器和盒模型的概念有点相像。但又有所区别，首先flex容器的特性不一样；flex容器中装的是flex-item 。我们可以将flex容器理解为一个装着flex-item的盒子，这样有助于帮助我们理解；但是flex容器和盒模型还是有很大区别。

首先我们可以通过display:flex来设置一个元素作为flex容器，在IE11以及一些新版本的浏览器这是标准的写法；都支持，但是在IE10以下的浏览器中我们需要通过兼容性处理来完成这个设置。具体的兼容性处理可以参考这篇文章：https://www.cnblogs.com/zhongfufen/p/6424189.html  这篇文章里面介绍了一些兼容性的处理办法，具体的其他兼容问题；可能需要我们在实际使用过程中去解决。

2.flex-item

当一个元素被设置为display:flex或者display:inline-flex之后，就成为了一个flex容器；它的子元素全部成为了flex-item(注意这里只是子元素而不包括孙元素等)。当成为flex-item之后我们可以在flex-item上使用一些属性来对item进行设置

这里列举出来了六个container和六个item属性,其中container属性只能用于设置display：flex或inline-flex的元素 而item属性则适用于container的子元素。即flex-item

六个container属性分别是：

1.flex-direction :  row|row-reverse|column|column-reverse   控制flex-container中item的排列方向 默认值为row

2.flex-wrap：nowrap|wrap|wrap-reverse  控制flex-container当超过宽度时是否换行以及换行的顺序  默认值为nowrap

3.flex-flow  flex-direction|flex-wrap 的合写   可以控制item的方向和换行    如: flex-flow:row wrap;表示的就是item以行的方式排列并且换行。

4.justify-content：flex-start|center| flex-end | space-between | space-around 定义flex-container中flex-item的主轴的对齐方式：

5.align-items:flex-start | center | flex-end | baseline |stretch 定义了flex-container交叉轴的对齐方式

6.align-content 定义了多个轴线的对齐方式，需要注意的是这里 只有一行(一列)的时候是无效的。这个属性我自己用的比较少所以有兴趣的同学可以 翻翻这篇博客 在这篇博客里也解释到了我上文提到的主轴和交叉轴的概念 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

顺便提一句，我自己使用的一些心得；flex布局最好的应用场景应当是一维布局:即我们在一个盒子中只需要控制元素往同一个方向的排列。如果需要在其中概念某些item内部的排列顺序，我们可以将item显式的声明称一个flex容器；即flex容器的嵌套。或者采用其他的方法 如：grid布局（有兴趣的同学可以了解一下）

在flex布局中，主轴并不是固定的；主轴的方向取决于父container的flex-direction的值。交叉轴总是垂直于主轴，这也是flex布局比较灵活的一个原因 。

下面介绍一下flex-item的六个属性：

1.flex-grow ：<interger>  定义item的放大比例，默认为0；即不放大

2.flex-shrink <interger> 定义item的缩小比例，默认为1即不缩小

3.flex-basis:表示设置item在主轴上的大小，默认为auto 即本来的大小；我们也可以设置PX。

4.flex：是flex-grow，flex-shrink，flex-basis的合写(三者的按顺序对应)  

5.align-self:表示单个item在交叉轴上 的排列方式

6.order定义item在flex-container中的排列方式  默认为0；这是非常重要的一个属性，意味着我们不必更改HTML在源文档中出现的顺序而可以改变item在container中呈现出的顺序

一般用在单独几个item需要改变呈现顺序，而整体呈现顺序不变的情况下；

   

如上图：现在又一个列表，我要求偶数列的文字位于图片之上。要达到这种效果，可能很多人会说直接改变顺序就行了；但是目前的问题是，我并不知道列数一共有多少。这个时候order就派上用场了，我们通过nth-child(even)选择器来设置偶数列元素的order从而达到偶数列文字位于图片之上的目的。

下面介绍flex中比较常用的垂直居中的方法：在flex-container上设置justify-content:center  align-items:center即可。

放上一篇比较详细的flex教程 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

有兴趣的同学可以看一看flex的标准 https://drafts.csswg.org/css-flexbox-1/#order-property

下面说一下，我在学习flex布局中碰到的一个新的好玩的东西 writting-mode；我们知道一般的布局中比较常见的应该是从左到右从上到下的方式，包括书写模式也是这样的。但是 writting-mode出现了，通过字面意思我们可以知道；这是对于文字的书写模式的设置。这个就要从中国古代说起啦，在中国古代的时候我们的诗和文章 包括对联都是从右往左进行书写和阅读；也有竖着排列的文本。在亚洲国家韩国和日本也是这种情况，所以这里的writting-mode主要用来改变文字的书写方向；到这里可能很多同学会有疑惑，这个有啥用呢？我直接通过一些其他的方式就可以达到这种效果了，如果是这样的话；那么W3C为什么没有在后面的版本取消掉这个属性，反而还更新到第四个版本呢 https://drafts.csswg.org/css-writing-modes-4/#writing-mode  这里就提到一些writting-mode的用法和介绍 。那么既然writting-mode可以改变文字的方向和排列规则，那么是否可以用来改变块状元素；从而让我们达到某些布局的效果呢：可能有些同学已经想到了 没错-垂直居中   垂直居中相较于水平居中而言是一个比较令人头疼的问题，但是通过writting-model改变纵横的规则后；我们可以使用水平居中的某些方式来达到垂直居中的效果。比如说:margin：auto  一般都是用在水平居中上面    但是当我们使用writting-mode并且设置方向为垂直流之后。我们就可以使用margin-auto来实现垂直居中啦，那么text-align：center呢。没错依然可以，大家可以看看这个例子  https://blog.csdn.net/m612a34/article/details/79367215

以上就是一些flex布局的理解和自己的一些实践；如果有错误，欢迎指正。