关于flex布局

Posted 2020-11-20 wjf0

• 学习flexbox 
  • 需要关注2点，一个是容器，一个是容器内的item，如果容器设置为flex布局，则容器内的item会自动设置为flex布局，如果没有特意设置为其它样式的话
  • 有main axis 和 cross axis, 取决于flex-direction如何设置，如果设置为row，则main axis就是x轴，水平的；如果设置为column, 则main axis就是y轴，垂直的
  • justiy-content 属性，用来描述main axis上元素的布局；默认值是flex-start, 主要需要注意的值就是 space-around space-between space-evenly 具体自己练习过就知道不同之处了
  • 使用 margin-left: auto; 来使得main axis上的某一个元素居左或居右，相关的解释说是：渲染的时候，margin-left具体的值，会被一个确定的值替换，具体用法还需要多加理解
  • flex:1; 它的魔力在哪里呢？我理解的是，随着容器也就是屏幕的拉长grow和压缩shrink，设置该属性的item，都会随之变化，而其他flex container中的item则会显示item本身的宽度大小，不随之变化，事实上，如果容器中只有一个item设置了flex:1，那么这里设置为flex:1 还是 flex:100都是一样的效果；另外，如果容器中的两个item，一个设置了flex:1，一个设置了flex:2，则呈1:2的形式grow或shrink
  • align-items: stretch 我们使用align-items来控制cross-axis轴上元素的排列，默认值是stretch, 会随着容器的扩大而扩大，它的取值也有flex-start, flex-end, center等，该属性是应用到container上的，我们也可以在容器中的item上应用align-self属性，同样的取值
  • flex-wrap: nowrap 这也是默认值，默认情况下我们的flex container仅仅是一行或者一列，因为默认值是nowrap，比如说flex container中有3个item，每个item，我们这里设置宽度为300px, 那么当flex container的宽度小于900px时，则按比例压缩shrink；大于900px时，则每个item宽度显示为300px，剩余的宽则留白，这是nowrap的情况；如果设置flex-wrap: wrap，则每个item就是会显示300px的宽，如果宽度不够，就换行
  • 回顾flex: 1; 我们知道flex是一个shorthand属性，可以用来设置flex-grow, flex-shrink, flex-basis，flex 1 等价于 flex 1 1 0, 分别对应着上面的三个属性，拉长grow，压缩shrink，flex-basis用来指定basic width
  • 排序 order: 0; 对于flex container中的item，我们还可以通过设置item的值来进行排序，默认值是0，容器中的item会按照设置order大小来进行从小到大的排序
  • 参考视频地址: https://scrimba.com/g/gflexbox (好像是需要FQ)