一文让你学会flex布局关于主轴 、侧轴的布局方式

flex布局
一、Flex布局/弹性布局:
Ø 是一种浏览器提倡的布局模型
Ø 布局网页更简单、灵活
Ø 避免浮动脱标的问题
二、 flex相关的属性
设置flex布局 用display:flex必须将属性加给亲父级弹性容器(通俗点讲,弹性容器也就是亲父级元素-----必须是亲爹,爷爷都不行)
三、flex布局有两个轴一个叫主轴,一个叫侧轴
主轴也就是水平方向的轴
侧轴也就是垂直方向的轴
一文让你学会flex布局关于主轴 、侧轴的布局方式_第1张图片
在弄清楚轴向的前提下,就可以给主轴或者侧轴进行子集元素的安排了
1、主轴方向子集元素安放有以下属性
=取值
===这里也就是解释的主轴的对齐方式
属性:justfy-content:

附上几个取值相对运行的样式图
html中的盒子嵌套关系

<body>
  <div class="box">
    <div>1div>
    <div>2div>
    <div>3div>
  div>
body>

取值:
flex-start 默认值, 起点开始依次排列

flex-start

flex-end 终点开始依次排列
一文让你学会flex布局关于主轴 、侧轴的布局方式_第2张图片

center 沿主轴居中排列
一文让你学会flex布局关于主轴 、侧轴的布局方式_第3张图片

space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
一文让你学会flex布局关于主轴 、侧轴的布局方式_第4张图片

space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
space-between--弹性盒子的紧贴弹性容器,中间间距相同--也是在开发布局中用的最多的一种取值

space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等
一文让你学会flex布局关于主轴 、侧轴的布局方式_第5张图片

2、侧轴同样也有对齐方式。
属性:align-items

取值:flex-start 默认值, 起点开始依次排列
一文让你学会flex布局关于主轴 、侧轴的布局方式_第6张图片

flex-end 终点开始依次排列
一文让你学会flex布局关于主轴 、侧轴的布局方式_第7张图片

center 沿侧轴居中排列
一文让你学会flex布局关于主轴 、侧轴的布局方式_第8张图片

stretch 默认值, 弹性盒子沿着主轴线被拉伸至铺满容器
一文让你学会flex布局关于主轴 、侧轴的布局方式_第9张图片
/* 结论: Flex布局中,弹性盒子会在弹性容器中被拉伸或者被挤压
弹性盒子会随着弹性容器的变化而变化 /===没有设置高度
/
在stretch效果中,弹性盒子会沿着侧轴被拉伸直到充满整个盒子
如果弹性盒子不被拉伸则是因为盒子设置了固定高度 /
/
在stretch效果中,要出现拉伸的话要弹性盒子不给高度才能出现 /
/
弹性盒子有固定的大小,盒子该多大,就是多大 /
/
弹性盒子没有固定大小,弹性盒子就是内容大小,添加stretch取值会被拉伸 */

一文让你学会flex布局关于主轴 、侧轴的布局方式_第10张图片
一文让你学会flex布局关于主轴 、侧轴的布局方式_第11张图片
3、flex伸缩比===此属性要加给需要设置的弹性盒子的其中一个,加给设置属性的元素本身。
属性:flex
取值:数字
=整数
注意:这里只是占据父级盒子剩余的部分

你可能感兴趣的:(css,html,前端)