zoukankan      html  css  js  c++  java
  • flex布局

    前言

    所谓布局即在指定的范围中(container)对里面的元素(items)进行一个布置。

    练习游戏(https://flexboxfroggy.com/

    • what:flex即弹性盒子
    • why:在移动端,禁止使用float,适当使用position,一定会使用到flex
    • how:只需在父盒子上加上display:flex
    • 要注意地点:
      • 左对齐和起点对齐:从左往右排,左就是起点。从上往下排,上就是起点,交叉轴用语。主轴的起点对齐叫做左对齐。
      • 主轴:所有子盒子在水平或者垂直方向的对齐方式,水平还是垂直方向取决于flex-direction,如果是row或者row-reverse则是水平方向的对齐方式,如果是column或者column-reverse则是垂直方向的对齐方式。我们称这条参照轴线为主轴(main-axis)。
      • 交叉轴:相应的,如果主轴是水平方向,那么垂直方向我们就称之为交叉轴(cross-axis),也叫做侧轴,反之同理。
      • 只要使用了flex,主轴和交叉轴一定会存在
      • flex布局是平面内的布局,也就是说二维布局

    container(display:flex)

    • flex-direction:子盒子布置方向
      • row(默认值):从左往右
      • row-reverse:从右往左
      • column:从上往下
      • column-reverse:从下往上
    • flex-wrap:子盒子布置时是否换行
      • wrap:换行(向下换行)
      • nowrap(默认值):不换行
      • wrap-reverse:换行(向上换行)
    • flex-flow:flex-direction和flex-wrap简写,默认值为 row nowrap
    • justify-content:参考主轴,所有子盒子的对齐方式
      • flex-start(默认值):左对齐
      • flex-end:右对齐
      • center:居中
      • space-around:两侧间隔相等
      • space-between:两端对齐
    • align-item:参照交叉轴,所有子盒子的对齐方式
      • flex-start:起点对齐
      • flex-end:终点对齐
      • center:居中
      • baseline:以子盒子里面的第一行文字的基线对齐
      • stretch(默认值):子盒子未设置高度,则子盒子会占满父盒子的高度
    • align-content:子盒子多行并且多列的的时候生效
      • flex-start:参考交叉轴,起点对齐
      • flex-end:参考交叉轴,终点对齐
      • center::参考交叉轴,居中对齐
      • space-around:参考交叉轴,间隔大小相等
      • space-between:参考交叉轴,两端对齐
      • stretch:参考交叉轴,占满整个交叉轴,子盒子宽或高未定生效

    items

    • order:指定子盒子的排列顺序,数值越小,排的越靠前。默认为0
    • flex-basis:指定子盒子的宽度,默认值为auto
    • flex-grow:指定子盒子的放大比例,默认为0
    • flex-shrink:指定子盒子缩小比例,默认为1
    • flex:flex-grow flex-shrink flex-basis的缩写,默认值0 1 auto
    • align-self:指定子盒子的对齐方式,可覆盖align-items
      • auto
      • flex-start
      • flex-end
      • center
      • baseline
      • stretch

    参考文章

    https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    https://www.jianshu.com/p/dddd6e3500ff

  • 相关阅读:
    zoj3888 找第二大
    zoj3882 博弈
    字典树小总结
    hdu2222 字典树
    hdu1247 字典树
    开放融合 | “引擎级”深度对接!POLARDB与SuperMap联合构建首个云原生时空平台
    阿里HBase高可用8年“抗战”回忆录
    最佳实践 | RDS & POLARDB归档到X-Pack Spark计算
    今日头条在消息服务平台和容灾体系建设方面的实践与思考
    饿了么监控系统 EMonitor 与美团点评 CAT 的对比
  • 原文地址:https://www.cnblogs.com/xingguozhiming/p/11867919.html
Copyright © 2011-2022 走看看