发表于： 2019-11-01 21:49:26
1 908
一、今天完成的事情
任务四，需要学习一下flex，什么是文档流？做完任务后用flex实现一下行不行。学习一下margin：auto。
在做任务四的过程中需要让三个元素在同一行内显示，怎么实现？
其实实现的方法很简单，在一个div里面，包裹这三个div，但是这三个元素，还是一个小的块级元素，这时候需要用到浮动的知识，将第一个元素靠左浮动，第三个元素靠右浮动，第二个元素用margin：o auto；来实现，但是写完之后会发现还是不行，这是为什么呢？我觉得是因为第一个靠左浮动，第二个靠右浮动，都已经脱离了文档流，不占文档流空间，但是第二个div仍然是一个块级元素，依然会占一行，所以第三个div就会被挤到第二行。这个时候需要，调换一下三个div的顺序，将第三个div调到第二个的位置，就是右浮动，这样就会在第三个div之前，前两个就可以左右布局了，然后在第三个div给text-align：center，这是文本的水平居中，第三个div就会在第一排，然后水平居中。我自己试着margin；0 auto；在这里不能水平居中。着这里不能水平居中的原因是我没有设置宽度，没有宽度就没有办法用margin：auto。切记！我觉得这个只适合在小的固定了大小的块里面，在这个里面我觉得是不合适的，居中很麻烦。
以上实现不出来，拜拜，换一种。
那么就用flex
flex是flexible box的缩写，意为：“弹性布局”，用来为盒子模型提供最大的灵活性。
采用flex布局的元素，称为flex容器|（flex container），简称“容器”。他的所有子元素自动称为容器成员，称为flex项目（flex item），简称“项目”
一、父元素属性
1、display：flex；
一个容器设置了display：flex；属性就定义了一个容器，他的直接子元素就会接受这个flex环境。
2、flex-direction
决定主轴的方向（即项目的排列方向）
可以设置四个值： reverse的意思是相反的
row：默认值，水平从左到右
column：垂直从上到下
row-reverse：水平从右到左
column-reverse：垂直从下到上
3、flex-wrap
默认情况下，项目都排在一条线上（又称“轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行
可以设置三个值：
nowrap：默认值，不换行
wrap：换行
wrap-reverse：换行，且颠倒行顺序，第一行在下方
4、flex-flow
这个属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。（水平从左到右且不换行）
5、justify-content（设置对齐方式的标签）
设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当弹性合理一行上的所有子元素都不能伸缩或已经达到最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。
可以设置五个属性值：
flex-start：默认值，弹性盒子元素将向行起始位置对齐
flex-end：弹性盒子元素将向行结束位置对齐
center：弹性盒子元素将向中间位置对齐。该行的元素将互相对齐并在行中居中对齐
space-between：弹性盒子元素会平均地分布在行里
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。
6、align-items
设置或检索弹性盒子在侧轴（纵轴）方向上的对齐方式
二、遇到的困难
一开始做任务四，用的布局方式是浮动，浪费了很多时间，最后发现实现不了，后来换了flex，就可以实现了
三、明天要做的事情
做完任务四，开始任务五
四、收获
学习了flex
返回列表
评论