2018-07-18

今天主要学习了flex布局,学习笔记如下:

1.指定flex布局:

          display:flex(任意容器) / inline-flex(行内元素);

          设为flex布局后子元素的float,clear和vertical-align属性会失效;

2.基本概念:

           flex容器有两根轴,水平叫主轴,垂直叫交叉轴;

           项目默认沿轴排列,在平面上沿xy轴构出项目;

3.容器属性及使用方法:

           flex-direction(项目排列方向):row(默认 从左到右)/row-reverse(从右到左) / column(从上到下)/column-reverse(从下到上);

           flex-wrap(定义换行):nowrap(默认 不换行)/wrap(从上到下换行)/wrap-reverse(从下到上换行);

           flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式: flex-flow: || ;

           justify-content属性(对齐方式):flex-start(默认 左对齐)/flex-end(右对齐)/center(居中)/

space-between(两端对齐)/space-around(每个项目两侧间隔相等);

           align-items(定义y轴对齐):flex-start(天花板对齐)/flex-end(地板对齐)/center(中线对齐)/

baseline(第一行文字基线对齐)/stretch(默认 高度占满整个容器);

           align-content(多行项目对齐):flex-start(靠上排列)/flex-end(靠下排列)/center(中心开始排列)/

space-between(上下两端对齐)/space-around(每行间隔两侧相等)/stretch(默认 高度填满);

4.项目属性及使用:

           order(项目排列数值从小到大):number /flex-grow(放大比例):num /flex-shrink(缩小比例):num /

flex-basis:|number;(设置主轴长度) / flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto / 

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

今天还模仿了百度的界面,只是模仿了界面就觉得人家很厉害,激励了我学习的想法。

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,648评论 0 25
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,257评论 0 6
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 787评论 0 1
  • Flexbox布局 1.布局模型 flexbox由Flex容器和Flex项目组成,容器即父元素,项目即子元素 任何...
    territory阅读 36评论 0 0
  • title: flex布局date: 2017-07-07 14:13:33tags: css笔记 flexbox...
    Gary23阅读 918评论 0 0