flex布局

不会后端的全栈工程师
69 阅读2分钟

基本概念

  1. 两个轴：主轴和侧轴。主轴是指x轴，侧轴是指y轴
  2. 两个点：起点和终点 主轴和侧轴都有起点和终点，用来定义子元素的对齐方式
  3. 两个对象：容器和子元素

image.png

父元素属性

  1. 父元素主要属性介绍（实现父元素效果时 子元素时不需要进行其他代码的操作的）
1. flex-direction:设置主轴的方向
2. justify-content：设置主轴上的子元素排列方式
3. flex-wrap：设置子元素是否换行（多行）
4. align-items:设置侧轴上的子元素排列方式（单行）
5. align-content:设置多行子元素的侧轴对齐方式
6. flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
  1. flex-direction属性
flex-direction：row | row-reverse | column | column-reverse

效果依次为：

image.png image.png

image.png

image.png

  1. justify-content属性 justify-content用来定义子元素在水平轴的排布方式
justify-content:flex-start | flex-end | center | space-around | space-between

效果分别是： image.png image.png image.png image.png image.png

  1. flew-wrap属性 flex布局默认是不换行的，宽度不够会对盒子进行压缩，flew-wrap可以定义换行
flex-wrap：nowrap | wrap

效果分别是：

image.png

image.png 6. align-items属性 align-items只能定义单行子元素的侧轴对齐方式，多行使用时，结果会与预期不符

align-items: flex-start | flex-end | center | stretch

//code show
<style>
    .body {
        display: flex;
        border: 1px solid green;
        align-items: stretch;
        width: 300px;
        height: 500px;
    }
    .content {
        border: 1px solid red;
        width: 100px;
        height: 100px;
    }

</style>
<body>

    <div class="body">
        <div class="content">1</div>
        <div class="content">2</div>
    </div>

</body>

效果图如下

image.png image.png image.png

image.png

  1. align-content属性
align-content: flex-start | flex-end | center | space-around | space-between | strech

总上：align-item，用于单行文本的排布，一行中每一个元素都应用排布方式，在多行排布时会应用到每一行；

align-content,只能应用多行排布，对整行排布起作用，不影响行内的元素。单行排布不起作用。

子元素属性

！！注意：子元素的属性需要加在自身，不能加在父元素上。

  1. align-self：定义子项自身在侧轴的排布
  2. order：改变子元素顺序
  3. flex：定义子元素缩放和拉伸比例
  4. flex-grow定义元素拉伸比例
  5. flex-shrink定义压缩比例
avatar
文章
阅读
粉丝