flex布局:容器的六个属性(二)

1、flex容器的六个属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

上篇文章讲了前面三个,这篇文章以实例的方法再理解一下后面的三个,尤其是justify-content、align-items这两个,用到的特别多。

2、justify-content属性定义了在主轴上的对齐方式

justify-content:flex-start;左对齐

左对齐

justify-content:flex-end;右对齐

右对齐

justify-content:center;居中对齐

居中

justify-content:space-between; 两端对齐,元素之间间距相等

屏幕快照 2017-05-16 下午7.37.22.png

justify-content:space-around; 元素两侧间隔相等。

每个元素两侧距离相等

3、align-items 属性定义了侧轴上的对齐方式

align-items:flex-start;侧轴起点对齐

屏幕快照 2017-05-16 下午7.50.46.png

align-items:flex-end;侧轴终点对齐

屏幕快照 2017-05-16 下午7.51.35.png

align-items:center; 侧轴居中对齐

屏幕快照 2017-05-16 下午7.53.06.png

align-items:baseline;基线对齐

屏幕快照 2017-05-16 下午7.55.54.png

4、align-content 属性定义了多根轴线的对齐方式,一根轴线不起作用;

align-content:flex-start; 与侧轴起点对齐

屏幕快照 2017-05-17 下午2.32.04.png

align-content:flex-end; 与侧轴终点对齐

屏幕快照 2017-05-17 下午2.33.04.png

align-content:center; 与侧轴中点对齐

屏幕快照 2017-05-17 下午2.34.25.png

align-content:space-between; 与侧轴两端对齐,轴线之间间隔平均分布

屏幕快照 2017-05-17 下午2.36.41.png

align-content:space-around; 轴线两侧间隔相等;

屏幕快照 2017-05-17 下午2.38.02.png

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,847评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 3,228评论 0 26
  • 一、Flex布局是什么 Flex是Flexible Box的缩写,用来为盒装模型提供最大的灵活性。 任何一个容器都...
    周花花啊阅读 546评论 0 9
  • 原文地址:flex布局语法篇 之前写过一篇关于实现元素居中的博文,我们发现每种布局要求都可以运用flex布局实现。...
    薛普定朗谔克阅读 1,142评论 0 8
  • 关于文字和星空的某些刹那 一 我从风中来过 依旧抵不过时间的没落 伸手触摸时间的脉搏 风起了 你站在大地上昂头思索...
    五月过后阅读 183评论 0 0
  • 2017年4月7日 星期五 晴 小宝今天28周+5天了,希望他在 “宫殿”里住得舒服。我的脚到了下午更肿了,到家后...
    朱砂紅塵阅读 2,350评论 0 1
  • 时间:2017年06月13日 地点:四平路1758号CCDI大厦二楼 老师:许多 学员:所...
    强超阅读 278评论 0 1