Flex布局

心如止水_自在如风
474 阅读4分钟

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

Flex布局

使用flex布局之后行内和块都是有大小的

布局原理 弹性布局

任何一个容器都可以指定为flex布局

当父元素设置为flex布局之后，子元素的float/clear/vertical-align会失效

采用flex布局的元素，叫做flex容器，简称容器，他的所有子元素会自动称为容器成员，称为flex项目(flex item)

image

子容器可以横向排列(默认)，也可以纵向排列

常见概念

主轴和侧轴，x轴和y轴 行和列，主轴侧轴是可变化的，flex-drection设置谁是主轴 剩余的就是侧轴，子元素是跟着主轴来排列的

image

flex布局父项常见属性

flex-drection

flex-drection 设置主轴的方向,实际就是控制子元素的排列，另一个就是侧轴

  • row (行)默认从左到右
  • row-reverse 从右向左
  • column (列) 从上到下
  • colunm-reverse 从下到上
justify-content

justify-content 设置主轴上的子元素排列方式，首先要确定好主轴是哪个,这里示例为x为主轴，如果是y为主轴就得反着用

  • flex-start 默认从头部开始 如果主轴是x，则从左到右image
  • flex-end 从尾部开始排列image
  • center 在主轴居中对齐，如果主轴是x轴侧 水平居中image
  • space-around 平分剩余空间，每个盒子相当于都在自己那片空间的中间image
  • space-between 先两边贴边，再平分剩余空间image
flex-wrap

设置子元素是否换行,比如说一行放不下了该怎么办

默认flex布局情况下，即使正常来讲父元素放不下子元素了，也会自动给你缩小子元素大小塞上去。因为默认就是放在一条线上，不换行的

默认 no-wrap 不换行

image

wrap 换行

image

align-items

align-items 设置侧轴上的子元素排列方式(子项为单行)，如何既水平居中又垂直居中，那就是得主轴也居中对齐，侧轴也居中对齐，flex-start,flex-end,center和justify-content里的意思一样，只不过是针对侧轴的。

  • flex-start

  • flex-end

  • center

  • stretch 拉伸，沿着侧轴拉伸 记得得取消子元素的高度

    image

    image

align-content

align-content 设置侧轴上的子元素排列方式(换行，多行),单行下无法使用，会失效

  • flex-start
  • flex-end
  • center
  • space-around
  • space-between
  • stretch,记得得取消子元素的高度
flex-flow

flex-flow 复合属性，相当于同时设置flex-direction和flex-wrap

  • flex-flow:column wrap;
  • flex-direction:column;
  • flex-wrap:wrap;

flex布局子项常见属性

flex:;

定义子项分配剩余空间 子项占有份数，数值越大分配的蛋糕越大

align-self

单独移动一个子项在侧轴的排列方式，可以使某个单个项目和别人的侧轴方式不同

imageimage

order

order定义子项的排列顺序，数值越小越靠前，默认是0

imageimage

用flex实现圣杯布局

CSS

/*清除基本样式*/
* {
  margin: 0;
  padding: 0;
}
​
body, html {
  height: 100%;
}
​
section {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
​
.child1 {
  height: 100px;
  background-color: blueviolet;
}
​
.child2 {
  flex: 1;
  display: flex;
  background-color: #0dc3c3;
}
​
.child21 {
  width: 100px;
  background-color: lightgreen;
}
​
.child22 {
  flex: 1;
  background-color: skyblue;
}
​
.child23 {
  width: 100px;
  background-color: lightgreen;
}
​
.child3 {
  height: 100px;
  background-color: #007fff;
}

HTML

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

先给父元素section设置flex布局，这样子元素自然就变成了flex块。给section设置一个高度900px，

然后给父元素设置flex-direction: column;，代表让子元素class为div1,div2,div3按照竖向排列，分别对应的是头部中间和底部。div1和div3分别代表顶部和底部用height分别设置一个高度，div2相当于中间的内容部分，所以直接设置属性flex:1，意思就是不管父元素多高，div2的高度=父元素section的高度-div1和div3的高度和。

image-20210811005220702

然后给div2再设置display:flex;主轴就是默认的从左到右，依次是div21,div22,div23，div21和div23设置一个固定的宽度，div22设置flex:1占满中间，这就是典型圣杯布局。

avatar
文章
阅读
粉丝