Flex布局笔记

flex布局:

display:flex;(-webkit)

两轴:

  1.主轴(main axis):子元素垂直方向上的中点垂直线;
  2.纵轴(cross axis):子元素水平方向上的中点垂直线;

属性:

- 父元素中:1.flex-direction:子元素在主轴上的排列顺序
          (可选值:row/row-reverse/column/column-reverse)
          2.flex-wrap:是否换行(可选值:nowrap/wrap/wrap-reverse)
          3.flex-flow:1和2的缩写形式
          4.justify-content:子元素在主轴上的对齐方式
         (可选值:flex-start/flex-end/center/space-between/space-around)
          5.align-items:子元素在交叉线上的对齐方式.
          (可选值:flex-start/flex-end/space-between/space-around/center)
          6.align-content:当子元素中有多于一根轴线时有效,用于设置子元素的对齐方式.
          (可选值:flex-start/flex-end/center/space-between/space-around/stretch)
-子元素中: 1.align-self:单个元素自身的对齐方式;
          (auto | flex-start | flex-end | center | baseline | stretch)
          2.order:排列顺序,默认0;
          3.flex-grow:放大比例,默认0;
          4.flex-shrink:缩小比例,默认0;
          5.flex-basis:占主轴的比例,默认auto
          6.flex:order|flex-grow|flex-shrink|flex-basis(2-5的缩写)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. Flex布局简介 Flex布局又叫弹性布局,设计思想是应用于响应式布局开发。兼容性为IE9以上。 2. Fl...
    Renderz_干了这碗口嚼酒阅读 3,887评论 1 1
  • 最近在学习flex-box的布局,也发现这个布局挺好用,在整个页面的响应式布局方面挺方便。不过在实践过程的时候,在...
    冯傻大粗阅读 4,298评论 0 1
  • flex布局基础知识 main axis(主轴): Flex容器的主轴主要用来配置Flex项目。它不一定是水平,这...
    前端小兵阅读 3,388评论 0 1
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,881评论 0 6
  • 因为不知道做什么,就想着把英语学起来。刚好住的地方就有一大公园,之前每周也会过去跑几次步。一直知道自己的发音有不少...
    Munger阅读 2,540评论 0 0