11、弹性布局Flex布局

@zyf哈哈哈哈

已于 2024-02-19 16:45:27 修改

阅读量465

点赞数 13

文章标签： css 学习前端 html css3

于 2024-01-10 21:23:45 首次发布

本文链接：https://blog.csdn.net/m0_58779986/article/details/135513527

版权

弹性布局——Flex布局

容器：父元素项目：子元素

容器属性

`display:flex;`

规定了当前元素就是容器元素，告诉浏览器要使用flex布局
会让项目在同一行显示
占位置
而且可以放置多个项目（默认宽度超出容器不会溢出内容会适应盒子大小），因为有弹性
设置前
不会超出盒子大小

`flex-direction` 项目在主轴上的排列方向（在容器上设置四种）

row : 主轴方向（默认是水平方向），从左到右
row-reverse : 主轴横向，从右到左

column: 主轴纵向，从上到下
column-reverse:主轴纵向，从下到上

`justify-content` 项目在主轴上的对齐方式(在容器上设置六种)

前提是不能占满盒子，否则没有效果

flex-start:在主轴上的起点对齐
flex-end:在主轴的终点对齐
center:在主轴的中心对齐

space-between:项目间距相等，第一个项目距离主轴起点和最后一个项目距离主轴终点为0

space-evenly:项目间距都一样，包括第一个跟最后一个距离起点终点位置

space-around:第一个项目距离起点和最后一个项目距离终点为中间项目间距的一半

`align-items`项目在交叉轴的对齐方式（3种）

flex-start: 在交叉轴的起点对齐
flex-end：在交叉轴的终点对齐
center：在交叉轴的中心对齐

小技巧
在主轴的对齐方式与在交叉轴的对齐方式同时使用会在水平垂直居中
- justify-content: center;
- align-items: center;

`flex-wrap` : 设置内容是否换行

nowrap : 不换行
wrap : 换行(默认)

设置项目换行后，在交叉轴上的对齐方式

flex-start:在交叉轴上的起点对齐
flex-end:在交叉轴的终点对齐
center:在交叉轴的中心对齐
space-between：
space-evenly:
space-around:

项目属性

`order`:默认是0，在主轴上数值越小越靠前

`align-self:`设置项目交叉轴方向上的对齐方式，用于覆盖容器的align-items

相对于浏览器的可视化高度

<style>
	html{
	height:100%;
}
</style>

设置右侧的文字相对于同一行内的左侧图片垂直居中

flex布局

 <style>
.container {
        display: flex;
        justify-content: center;
        /* 水平居中 */
        align-items: center;
        /* 垂直居中 */
        }
</style>
</head>
<body>
    <div class="container">
        <img src="./images/adv.jpg" alt="Image">
        <p>Your TextYour TextYour TextYour TextYour Text</p>
    </div>
</body>

行内元素`vertical-align: middle;`给图片添加

<style>
    img{
        vertical-align: middle;
    }
</style>
</head>
<body>
    <div class="container">
        <img src="./images/adv.jpg" alt="Image">
        <span>ahhahha</span>
    </div>
</body>