<!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>
</head>
<body>
<!-- 缩放
scaleX()水平方向缩放
scaleY()垂直方向放大
scale()双方向放大
transform:scale()-->
<!--
弹性盒子flex
flex-direction指定弹性元素的排列方式
row默认值,从左向右排列
row-reverse从右向左排列
column从上向下排列
row-column从下向上排列
主轴:弹性元素的排列方向
侧轴:与主轴垂直的方向
弹性元素的特性
flex-grow指定弹性元素的伸展的系数
当元素有多余空间时,剩余空间会按比列分配
flex-shink指定弹性元素的收缩的系数
当元素空间不够时,元素会按比例收缩
flex-wrap:设置弹性元素在弹性容器中是否自动换行
可选值:
nowrap默认值,元素不会自动换行
wrap元素沿着副轴方向自动换行
wrap-reverse沿着副轴反方向换行
flex-flow可同时设置wrap和direction的值
justify-content设置如何分配主轴上的空白空间
flex-start沿主轴起边排列
flex-end沿主轴终边排列
center居中排列
space-around空白分布在元素两侧
space-between空白均匀分布在元素中间
space-evenly空白分布在元素单侧
align-item设置元素在副轴上如何对齐
可选值:
stretch默认值,将元素的长度设置为相同的值
flex-start元素不会拉伸,沿着副轴起边对齐
flex-end沿着副轴终边对齐
center居中对齐
baseline基线对齐
align-content副轴空白空间的分布
和justify-content类似
flex-basis设置元素在株洲上的基础长度
默认值auto表示参考元素自身的宽度和高度
flex可以设置弹性元素的生长系数,收缩系数和flex-basis
order决定元素的排列顺序
-->
</body>
</html>
css基础19
最新推荐文章于 2024-09-30 20:20:23 发布