flex布局概述
此前我们制作的所有网页都是基于盒子模型和浮动布局完成的,
flex布局又叫弹性布局(或者叫弹性盒子布局)
这是一种更先进的布局方式,可以让网页布局更简洁,更易于维护。
基本概念
将元素设置为display:flex;元素会变成一个flex容器。
容器内部的元素为flex元素或者叫flex项目(flex-item)
main axis:主轴
cross axis:交叉轴
flex容器中的默认效果
1.flex项目在flex容器中延主轴排列。
2.flex项目高度适应flex容器高度(同行内元素)
设置flex容器
flex-direction:设置flex项目排列方向
justify-content:flex项目主轴排列方式
align-items:flex项目在交叉轴的排列方式(给容器设置的属性)
flex-direction
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
justify-content (延主轴对齐方式)
flex-start(默认值):左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
align-item (延交叉轴对齐方式)
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
stretch(延伸)(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
flex项目属性
flex-grow:属性定义项目的放大比例,默认为0,空间充足,等比例补全。
flex-shrink:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis:主轴排列为宽度,交叉轴排列为高度,设置px,默认值是auto
flex:综合上面三个样式。简写
align-self:flex项目的对齐方式(auto|flex-start|flex-end|center|baseline|stretch)
(给flex项目设置的属性)(通常用来设置一个元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
display: flex;
background-color: yellow;
width: 800px;
height: 300px;
/* flex-direction: row;
justify-content: space-around; */
}
flex项目不会超出flex容器
如果超出了 元素会等比地根据flex容器缩小
flex-shrink值越大 缩小的程度越大
.item{
width: 300px;
/* height: 100px; */
background-color: red;
border:1px solid blue;
/* flex-grow:1; */
flex: 1;
}
.big{
/* width: 300px;
flex-shrink: 2; */
/* flex-grow: 3; */
/* flex-basis: 600px; */
flex: 2;
height: 100px;
align-self: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">123</div>
<div class="item">456</div>
<div class="item big">789</div>
<div class="item">135</div>
<div class="item">246</div>
</div>
</body>
</html>
初级前端的自我救赎【HTML+CSS篇】:15.flex布局
最新推荐文章于 2023-03-20 23:26:53 发布