首页 > 前端 > 使用Css3的Flex布局实例：元素横轴两头布局纵轴居中对齐

使用Css3的Flex布局实例：元素横轴两头布局纵轴居中对齐

2022年5月4日
- 前端
1,547 次
标签： css3, Html

在Css3中有一个新的元素属性，display:flex;,这个新的Css3属性使得在网站前端人员中更加自如便捷的对前端页面进行布局。今天主要记载的就是Flex布局实例，来实现元素在横轴两段对齐，在纵轴上下居中对齐，这个实例以前端页面中的网站头部的logo区域和搜索框区域两部分组成，具体效果就是实现Logo图片、和搜索框在横轴上两段对齐，在纵轴上居中对齐。

一、Flex布局的申明：

想要让一个元素内的所有子元素实现Flex弹性布局，就必须将元素先设置为Flex布局，然后再根据自己所需要的布局样式再对具体的布局样式进行设置，display:flex;是Flex布局的前提条件，且必须是设置在父级元素上。

二、Flex布局常用的语法：

1、控制横轴布局（左右）或者是纵轴布局（上下）排序的语法：

flex-flow属性，是控制布局横轴或者是纵轴布局的一种简写语法，这样写出的Css样式将更加简便，flex-flow常用的值有两个，第一个是设置是横轴还是纵轴，第二个属性设置的是换行还是不换行，默认是横轴方向布局不换行的形式，如果在实际开发中不写flex-flow，那就是默认的横轴方向布局不换行。flex-flow:column nowrap就是在纵轴形式布局并且不换行，如果是flex-flow:row nowrap就是在横轴上布局且不换行，如果第二个属性值设置成wrap，就是换行的意思。

2、控制子元素在横轴上的排序样式：

justify-content属性决定了主轴方向上子元素的对齐和分布方式。

flex-start ：子元素都去起始位置对齐。

flex-end ：子元素都去结束位置对齐。

center ：子元素都去中心位置对齐。

space-between : 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。

space-around : around是环绕的意思，意思是每个flex子元素两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。

space-evenly : evenly是匀称、平等的意思。也就是视觉上，每个flex子元素两侧空白间距完全相等。

如果将元素设置为：justify-content: space-between;就是让这个元素下的所有子元素在横轴上呈两段对齐的形式布局。具体设置为不同的值，可根据自己时期开发中的需要设置。

3、align-items : 每一行中的子元素上下对齐方式。

flex-start; 顶部对齐。

center; 居中对齐。

flex-end; 底部对齐。

当元素设置为align-items：center;，就是将元素下所有的子元素上下对齐方式设置为居中对齐形式。

以上就简单的介绍了flex布局的一些简单而又常用的布局语法。

三、实例实现元素横轴两头布局纵轴居中对齐：

在实例中运用了Css3的Flex布局，实现了元素下的所有子元素元素横轴两头布局纵轴居中对齐，用Flex布局简单实现了网页头部logo和搜索框的前端效果。

Html部分代码：

<!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>flex布局居中</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="header-top">
        <div class="logo">
            <a href="index.html"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""></a>
        </div>
        <input type="search" placeholder="请输入关键词">
    </div>
</body>

</html>

Css部分代码：

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}

.header-top {
    display: flex;
    width: 1170px;
    height: 80px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;
}

.header-top .logo {
    width: 135px;
    height: 45px;
}

.header-top .logo img {
    display: inline-block;
    width: auto;
    height: 100%;
}

效果图：

四、Flex布局注意事项：

1、必须设置父级元素为display:flex;，此项是必须设置的属性，且必须是父级元素。

2、不设置flex-flow属性的时候，就是默认的flex-flow:row nowrap;。

3、水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父级元素决定。

4、垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父级元素决定，高度由内容决定。

5、当子项的总宽度大于父级元素的时候，会自动收缩。

6、当子项的内容已经达到了父级元素最小宽高的时候，就会出现溢出的现象。

以上就是简单的对Css3的Flex布局语法的简单介绍及使用Css3的Flex布局实例：元素横轴两头布局纵轴居中对齐的全文。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。

使用Css3的Flex布局实例：元素横轴两头布局纵轴居中对齐

猜你喜欢