弹性盒模型flex

最新推荐文章于 2023-03-29 19:50:16 发布

guokanglun

最新推荐文章于 2023-03-29 19:50:16 发布

阅读量112

点赞数

分类专栏： DIV + CSS

本文链接：https://blog.csdn.net/gklcsdn/article/details/103502394

版权

DIV + CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

弹性盒子模型:一种更为简单,有效的方式对一个元素中的子元素进行排列对齐的模型

1. 弹性盒模型

以下属性都是给容器

display: flex 给父级
让子元素默认横着排列；

横向排列方式：
flex-direction : row 从左到右
flex-direction : row-reverse 从右到左

纵向排列方式：
flex-direction : column 从上到下
flex-direction : column-reverse 从下到上

换行属性：
flex-wrap: wrap; 子元素总宽度超过父元素会换行

元素主轴方向排列方式：
justify-content: flex-start;(左对齐)
justify-content: flex-end;(右对齐)
justify-content: center;(居中对齐)
justify-content: space-between;(两端对齐元素间间隔相等)
justify-content: space-around;(元素左右间隔相等)

元素纵轴方向：
align-items:center; 上下居中
align-items:flex-start; 纵轴上对齐
align-items:flex-end; 纵轴下对齐
align-items:stretch; 容器高度（继承父级）
align-items:baseline; 基线对齐

2. 子元素属性

order: number 定义子元素顺序，数值越小排列越靠前

flex-grow ： number；将剩余的空间按照比例划分

flex-grow ： 1;   占剩余1/6
flex-grow ： 2;  占剩余2/6
flex-grow ： 3;  占剩余3/6

3. 平分空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tabs_title{
            display: flex;
        }
        .title_item{
            flex:1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class='tabs'>
        <div class='tabs_title'>
          <div class='title_item active'> 首页 </div>
          <div class='title_item'> 原创 </div>
          <div class='title_item'> 分类 </div>
          <div class='title_item'> 关于 </div>
        
          </div>

    </div>
</body>
</html>

在这里插入图片描述

guokanglun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性盒模型flex

弹性盒子模型:一种更为简单,有效的方式对一个元素中的子元素进行排列对齐的模型1. 使用方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...
复制链接

扫一扫

专栏目录