CSS盒子 flex弹性布局

使用flex弹性布局页面效果图(源代码在文章末尾):

目录

flex弹性布局

一、基本容器

二、设置主轴方向

三、设置主轴对齐方式

四、设置交叉轴上的对齐方式


flex弹性布局

一、基本容器

Flexbox 是 CSS3 引入的一种一维布局模型,旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。其核心概念包括:

1、容器与项目:采用 Flex 布局的元素称为 Flex 容器,其内部的子元素称为 Flex 项目。

2、主轴与交叉轴:Flex 容器有两根轴,主轴由flex-direction定义,交叉轴垂直于主轴。

3、空间分配:通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。

4、对齐方式:justify-content 控制主轴对齐,align-items 和 align-content 控制交叉轴对齐。

举例源代码:

css 复制代码
<style>
        .container {
            display: flex;
            border: 2px solid #ccc;
            padding: 10px;
        }

        .item {
            background-color: #4CAF50;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
    </style>
html 复制代码
<body>
    <h3>Flex容器示例</h3>
    <div class="container">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
</body>

效果图:

二、设置主轴方向

flex-direction属性的四种取值,决定了主轴的方向和项目的排列方式。

1、将从左到右的箭头,设置为主轴

flex-direction: row; 默认值,水平排列(从左到右)

2、将从右到左的箭头,设置为主轴

flex-direction: row-reverse; 水平反向排列(从右到左)

3、将从上到下的箭头,设置为主轴

flex-direction: column; 垂直排列(从上到下)

4、将从下到上的箭头,设置为主轴

flex-direction: column-reverse; 垂直反向排列(从下到上)

举例源代码:

css 复制代码
<style>
        .container {
            display: flex;
            border: 2px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
        }

        .item {
            background-color: #2196F3;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }

        
        .row {
            flex-direction: row; 
        }
        
        .row-reverse {
            flex-direction: row-reverse;
        }
        
        .column {
            flex-direction: column; 
        }

        .column-reverse {
            flex-direction: column-reverse; 
        }
html 复制代码
<body>
    <h3>flex-direction: row</h3>
    <div class="container row">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>flex-direction: row-reverse</h3>
    <div class="container row-reverse">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>flex-direction: column</h3>
    <div class="container column">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>flex-direction: column-reverse</h3>
    <div class="container column-reverse">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
</body>

效果图:

三、设置主轴对齐方式

justify-content属性的六种取值,控制项目在主轴上的对齐方式和间距分布。

1、justify-content: flex-start; 默认值,项目向主轴起点对齐

2、justify-content: flex-end; 项目向主轴终点对齐

3、justify-content: center; 项目在主轴居中对齐

4、justify-content: space-between; 项目均匀分布,首尾项目紧贴容器边缘

5、justify-content: space-around; 项目均匀分布,每个项目两侧间距相等

6、 justify-content: space-evenly; 项目均匀分布,所有间距相等

举例源代码:

css 复制代码
    <style>
        .container {
            display: flex;
            border: 2px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
            height: 100px;
        }

        .item {
            background-color: #FF9800;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
        
        .justify-start {
            justify-content: flex-start; 
        }
        
        .justify-end {
            justify-content: flex-end; 
        }
        
        .justify-center {
            justify-content: center;
        }
        
        .justify-between {
            justify-content: space-between; 
        }
        
        .justify-around {
            justify-content: space-around; 
        }
        
        .justify-evenly {
            justify-content: space-evenly; 
        }
        
    </style>
html 复制代码
<body>
    <h3>justify-content: flex-start 项目向主轴起点对齐(默认值)</h3>
    <div class="container justify-start">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>justify-content: flex-end 项目向主轴终点对齐</h3>
    <div class="container justify-end">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>justify-content: center 项目在主轴居中对齐</h3>
    <div class="container justify-center">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>justify-content: space-between 项目均匀分布,首尾项目紧贴容器边缘</h3>
    <div class="container justify-between">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>justify-content: space-around   项目均匀分布,每个项目两侧间距相等</h3>
    <div class="container justify-around">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
    
    <h3>justify-content: space-evenly   项目均匀分布,所有间距相等</h3>
    <div class="container justify-evenly">
        <div class="item">项目1</div>
        <div class="item">项目2</div>
        <div class="item">项目3</div>
    </div>
</body>

效果图:

四、设置交叉轴上的对齐方式

align-items属性的五种取值,控制项目在交叉轴上的对齐方式。

1、 align-items: flex-start; /项目向交叉轴起点对齐

2、align-items: flex-end; 项目向交叉轴终点对齐

3、align-items: center; 项目在交叉轴居中对齐

4、align-items: stretch; 项目拉伸以填满容器高度(默认值)

5、align-items: baseline;

举例源代码:

css 复制代码
    <style>
        .container {
            display: flex;
            border: 2px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
            height: 200px;  
        }
        

        .align-start {
            align-items: flex-start;        }
        
        .align-end {
            align-items: flex-end;
        }
        
        .align-center {
            align-items: center; 
        }
        
        .align-stretch {
            align-items: stretch;         }
        
        .align-baseline {

            align-items: baseline; 
        }
        
        .item {
            background-color: #9C27B0;
            color: white;
            margin: 5px;
            padding: 20px;
            text-align: center;
        }
        
        .tall {
            height: 120px;
        }
        
        .short {
            height: 60px;
        }
        
        .baseline {
            padding-top: 80px;  
        }
    </style>
html 复制代码
<body>
    <h3>align-items: flex-start 项目向交叉轴起点对齐</h3>
    <div class="container align-start">
        <div class="item tall">高项目</div>
        <div class="item short">矮项目</div>
        <div class="item">标准项目</div>
    </div>
    
    <h3>align-items: flex-end 项目向交叉轴终点对齐</h3>
    <div class="container align-end">
        <div class="item tall">高项目</div>
        <div class="item short">矮项目</div>
        <div class="item">标准项目</div>
    </div>
    
    <h3>align-items: center 项目在交叉轴居中对齐</h3>
    <div class="container align-center">
        <div class="item tall">高项目</div>
        <div class="item short">矮项目</div>
        <div class="item">标准项目</div>
    </div>
    
    <h3>align-items: stretch 项目拉伸以填满容器高度(默认值)</h3>
    <div class="container align-stretch">
        <div class="item" style="padding: 5px;">拉伸项目1</div>
        <div class="item" style="padding: 5px;">拉伸项目2</div>
        <div class="item" style="padding: 5px;">拉伸项目3</div>
    </div>
    
    <h3>align-items: baseline 项目根据基线对齐</h3>
    <div class="container align-baseline">
        <div class="item baseline">基线项目1</div>
        <div class="item">标准项目</div>
        <div class="item short">矮项目</div>
    </div>
</body>

效果图:

效果图源代码:

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flex布局练习</title>
    <style>
        
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        
       
        .navbar {


            display: flex;
            justify-content: space-between;
            align-items: center;



            background-color: #333;
            color: white;
            padding: 10px 20px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        


        
        .nav-links {
            display: flex;


            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .nav-links li {
            margin-left: 20px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
        }
        




        
        .search-box {
            display: flex;
            align-items: center;
        }
        
        .search-box input {
            padding: 5px;
            border: none;
            border-radius: 3px 0 0 3px;
        }
        
        .search-box button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 0 3px 3px 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
 
    <nav class="navbar">
        <div class="logo">网站Logo</div>
        
        <ul class="nav-links">
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
        
        <div class="search-box">
            <input type="text" placeholder="搜索...">
            <button><i class="fa fa-search"></i></button>
        </div>
    </nav>

    <div class="container">
        <h1>欢迎来到我们的网站</h1>
        <p>这里是一些关于我们的内容。</p>
    </div>
</body>
</html>
相关推荐
小样还想跑15 分钟前
axios无感刷新token
前端·javascript·vue.js
Java水解24 分钟前
一文了解Blob文件格式,前端必备技能之一
前端
用户3802258598241 小时前
vue3源码解析:响应式机制
前端·vue.js
bo521001 小时前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员1 小时前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
山有木兮木有枝_1 小时前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子1 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a1 小时前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心1 小时前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq1 小时前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端