伸缩布局等份flex

最新推荐文章于 2025-06-20 03:32:06 发布

Pruett

最新推荐文章于 2025-06-20 03:32:06 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html css js

本文链接：https://blog.youkuaiyun.com/Pruett/article/details/79527941

html css js 专栏收录该内容

19 篇文章

订阅专栏

响应式的布局，跟着浏览器的变化而变化

1.给父元素设置flex布局

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

//CSS
section {
    display: flex;
    width:800px;
    height: 100px;
}
section div:nth-child(1)  {
  flex: 1 ;//没有单位  占一份
}
section div:nth-child(2) {
  flex: 2; //占父元素的两份
  border: 5px;//可以设置，不会影响父盒子分出份数来
}
section div:nth-child(3) {
   flex: 1;
}
/* 
将section分成4份，   第一个div占一份  第二个两份  第三个一份
*/

因为是响应式布局，所以会随着浏览器进行变化，但是可以设置最小的变化到多大，最大变化到多大

//在父元素中 ，即使用了display: flex;的盒子
section {
    display: flex;
    width:800px;
    height: 100px;
    min-width: 280px; //不能小于280
    max-width: 1200px;//不能大于1200
}

2.伸缩布局固定宽度
如果父盒子里有三个盒子，有一个盒子使用width: 300px; 没使用flex.则两个使用flex的盒子将剩下的宽度进行平分，第一个盒子的宽度是不变的而且不是响应式的。
3.伸缩布局的排列方式
排列方式默认是横向的，即沿x轴

flex-direction: row;  //水平排列
flex-direction: column;  //垂直排列  
flex-direction: row-reverse;  //水平翻转排列
flex-direction: column-reverse;  //垂直翻转排列

4、伸缩的最小和最大，不能再响应变化

min-width  响应式，响应到最小多少像素的时候就停止，不再变化
max-width

以下的属性，在父元素中写

5.justify-content 水平布局
如果父元素使用flex，子元素不能填满盒子的话，使用这个属性，设置子元素排列的内容。
justify-content 属性的值

flex-start  默认值，项目位于容器的开头   让子元素从父元素的开头开始排序，但是盒子顺序不变
flex-end   项目位于容器的结尾。 让子元素从父容器的后面开始排序，但是盒子顺序不变
center    项目位于容器的中心 让子元素在父容器中间显示
space-around 项目位于各行之前，之间，之后都留有空白的容器内，相当于给每个盒子添加了margin  外边距

space-between 项目位于各行之间留有空白的容器内，左右盒子贴近父容器，中间的盒子平均分布空白间距，如图：

这里写图片描述
5.align-items 垂直对齐
如果子元素的高度比父盒子的高度小，单行情况下
属性值：

flex-start   上对齐
flex-end  底对齐
center    垂直中心对齐
stretch  默认值  如果子元素不给高度，就会被拉伸，适应父元素的高度

6.flex-wrap 控制是否换行
如果子元素内容宽度超过父盒子的时候

nowrap  默认值  不拆行，不拆列  ，则压缩显示，强制一行显示
wrap     超过的自动换行 
wrap-reverse  换行显示，翻转， 和wrap是相反的。

7.flex-flow
flex-flow是flex-direction 和flex-wrap的缩写

flex-flow: flex-direction flex-wrap;

或者

flex-flow: 排列方向 换不换行;

8.align-content
多行的情况下进行使用
必须在父元素中设置display: flex; 并且设置横向排列flex-direction: row; 并设置换行 flex-wrap: wrap; 否则align-content不起作用

flex-start   上对齐
flex-end  底对齐
center    垂直中心对齐
stretch  默认值  如果子元素不给高度，就会被拉伸，适应父元素的高度
space-around 项目位于各行之前，之间，之后都留有空白的容器内，相当于给每个盒子添加了margin  外边距
space-between 项目位于各行之间留有空白的容器内，左右盒子贴近父容器，中间的盒子平均分布空白间距

9.order属性，控制子项目的排列顺序，正序方式排列，从小到大
用css来控制盒子前后顺序，不用非得到结构里面，更改盒子的书写顺序
数字越小的排在最前面，，不写的话就默认都是0，可以给负数，比0小。
在子盒子的css中：