flex布局问题

本文主要记录flex布局demo和属性问题

flex顾名思义,弹性盒子的布局属性。使用此属性得设置一个父级,然后操作父级中的子元素
heml代码

<style>
    body { margin:0; padding: 0;}
    .father {
        position: flex;
        left: 0;top: 0;right: 0;bottom: 0;margin: auto;
        width: 50vw;
        height: 50vh;
        border: 2px solid #000;
        display: flex;
        padding: 0px;
    }
    .boy {
        width: 20px;
        height: 20px;
        background: #ffc107;
        border: 1px solid #00bcd4;
        margin: 0px;
    }
</style>
<body>
    <div class="father">
        <div class="boy a">a</div>
        <div class="boy b">b</div>
        <div class="boy c">c</div>
        <div class="boy d">d</div>
        <div class="boy e">e</div>

        <div class="boy a">a</div>
        <div class="boy b">b</div>
        <div class="boy c">c</div>
        <div class="boy d">d</div>
        <div class="boy e">e</div>
    </div>
</body>

备注:可以指定任意一个容器元素为父级.father{ display:flex; },行内元素同样可以.father { display:inline-flex }。Webkit 内核的浏览器,必须加上-webkit前缀,示:display:-webkit-flex
图示:

image.png

以上一个基本的弹性盒子算是创建完成了,下面详细介绍关于flex父级框的属性问题

元素 说明
flex-direction row 、row-reverse 、 column 、 column-reverse 主轴排列方向上、下、左、右
flex-wrap nowrap 、 wrap 、 wrap-reverse 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行
flex-flow row nowrap (默认) flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content flex-start 、 flex-end 、 center 、 space-between 、 space-around 子元素在主轴上的对齐方式,分别是左对齐、右对齐、居中对齐、居中两端对齐、分散两端对齐
align-items flex-start、flex-end、center、baseline、stretch 交叉轴的起始点对齐,中间对齐,终点对齐,文字基线对齐,高度占满
align-content flex-start、flex-end、center、space-between、space-around、stretch 一言概之,相当于纵向轴的align-items(必须有多个中心轴才可使用)

看到上面密密麻麻的属性很蒙圈不要紧,下面贴出相应的demo

flex-direction属性

.box { flex-direction: row | row-reverse | column | column-reverse; }

image.png

flex-wrap属性

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

image.png

image.png

image.png

flex-flow属性

flex-flowflex-directionflex-wrap
比如:flex-flow: <flex-direction> || <flex-wrap>;等效于flex-direction:flex-wrap

justify-content属性

.box { justify-content: flex-start | flex-end | center | space-between | space-around; }

image.png

align-items属性

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

image.png

align-content属性

image.png

转载说明:以上列举所有父级的属性的demo,文中主要内容来自http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
阮一峰大神的日志,

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,519评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,630评论 0 26
  • 阅读目录移动开发基本知识点 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    张宪宇阅读 1,568评论 0 1
  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 5,062评论 0 9
  • 白露之后,天是一天一个样子。每每路过那片林木,我都会找寻那点致其中的红黄叶子来,好像除了气温外,这才是最真切地感受...
    从前慢者阅读 823评论 0 9