今天完成的事情

        查看知识flex弹性布局

        以下为自我理解：如何一个容器都可以flex布局，一个大盒子flex布局以后，其中里面的小盒子也可以flex布局，但是设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。但浮动float、清除clear、垂直居中vetical-align属性可以通过flex 更容易布局显示。

        flex容器默认有两条线，一条水平的主轴main axis 和垂直的交叉轴cross axis。

        flex有六个属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

第一个flex-direction 决定了主轴的方向

这个较好理解

第二个flex-wrap 换行属性

nowrap 不换行    wrap 换行    wrap-reverse换行，第一行在下方

第三个flex-flow   是flex-direction属性和flex-wrap属性的简写形式

简写模式有什么用呢。。。难道两效果同时有吗

第四个 justify-content  定义了项目在主轴上的对齐方式。

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

第五个 align-items 定义项目在交叉轴上如何对齐。

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

第六个 align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

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

        项目的属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

明天计划的事情

完成任务4，动手练习flex

遇到的困难

        虽然查看了新的知识点- flex ，但是代码都是需要练习来巩固的，看了知识点，理解依然抽象化，更何况动手操作呢，比如想完成一个样式，还需要去找相对应的属性与值。这是一个需动手慢慢熟悉的一个过程

收获

       学习了新的知识点 flex