CSS 弹性布局

这篇具有很好参考价值的文章主要介绍了CSS 弹性布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

提示:这篇比较重要,做复杂页面时经常会用到!会不断更新❗


前言

提示:这里可以添加本文要记录的大概内容:

弹性布局的总体思想是把布局不写在标记上,而是把布局的样式代码写在最大的父标记上

让布局实现自适应和自动调整,可以在不同屏幕大小和设备上保持一定的布局效果,同时也可以方便地进行响应式设计

一些常用示例代码:

    /* 弹性布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
    /* 改变主轴方向,主轴方向垂直设置,默认是row水平 */
    flex-direction: column;
    /* 折行显示 */
    flex-wrap: wrap;

提示:以下是本篇文章正文内容,下面案例可供参考

主轴和侧轴

盒子变成弹性盒子后标记怎么排列?它是按照两个轴为方向进行排列显示(主轴和侧轴)

默认主轴是水平的,默认侧轴是垂直的

先设置一个大div,里面放五个小div,并分别控制他们的样式

【示例代码】:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
            width: 300px;
            height: 300px;
            border: 2px solid black;
            margin-top: 50px;
            margin-left: 100px;
        }
        .s{
            width: 50px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- div.p>div{div$}.s*5 公式生成-->
    <div class="p">
        <div class="s">div1</div>
        <div class="s">div2</div>
        <div class="s">div3</div>
        <div class="s">div4</div>
        <div class="s">div5</div>
    </div>

</body>
</html>

输出效果:从上到下,五个小div默认排列
CSS 弹性布局

在父标记内加上弹性布局 display: flex;
输出显示:
CSS 弹性布局

弹性盒子中的子标记,是先按照主轴排列,再按照侧轴排列
主轴侧轴彼此垂直交叉

flex-direction 主轴方向

flex-direction:row      /*子元素沿主轴方向排列,也就是水平方向 row为默认值*/
flex-direction:column   /*子元素沿侧轴方向排列,也就是垂直方向 */

主轴默认是水平方向,【flex-direction: column; 垂直排列】
column主轴方向是垂直的(列)
row主轴方向是水平的(行)

弹性盒子中的子标记都会变成:行内块类型

子标记里的5个div宽都是50px,总宽度是250px,接下来看一下他在整个大div宽300px内的显示
CSS 弹性布局
如果把5个小div的宽度改成80px,那总宽是400px,而大div总宽是300px,那会不会主轴不满然后侧轴排列?

输出结果:
CSS 弹性布局
这就是弹性盒子的特点:等比例压缩了

弹性盒子中的子标记占据的总尺寸超过弹性盒子的尺寸,默认弹性盒子会讲子标记等比例的压缩
CSS 弹性布局

flex-wrap 折行

如果说不想让他等比例压缩,要他折行显示侧轴排列时用到

在父标记中加入flex-wrap: wrap;

输出显示:
CSS 弹性布局

弹性盒子对于一些简单的样式声明,他会完成一些复杂的计算和排列

弹性盒子尺寸小于子标记的总尺寸时,会在侧轴排列(折行显示)

主轴排列方式

/* 默认row,主轴排列 */
flex-direction: row;

justify-content:

flex-start:默认左对齐

主轴水平→左对齐,主轴垂直→上对齐

justify-content: flex-start;

总代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
            width: 500px;
            height: 300px;
            border: 2px solid black;
            margin-top: 50px;
            margin-left: 100px;
            /* 弹性布局 */
            display: flex;
            /* 水平向右排列(默认值) */
            flex-direction: row;
            flex-wrap: wrap;

            justify-content: space-evenly;
        }
        .s{
            width: 80px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- div.p>div{div$}.s*5 公式生成-->
    <div class="p">
        <div class="s">div1</div>
        <div class="s">div2</div>
        <div class="s">div3</div>
        <div class="s">div4</div>
        <div class="s">div5</div>
    </div>

</body>
</html>

flex-end:右对齐

主轴水平右对齐,主轴是垂直下对齐

justify-content: flex-start;

CSS 弹性布局

center:居中

主轴水平整体水平居中,主轴是垂直整体垂直居中

justify-content: center;

CSS 弹性布局

space-between:两端对齐

主轴水平,左右两端的子标记紧挨着父标记的边框,
主轴垂直,上下两端子标记紧挨着父标记的边框,子标记之间间距相等

justify-content: space-between;

父标记宽度500px
CSS 弹性布局
父标记宽度200px
CSS 弹性布局

space-around:子标记之间的间距是子标记与父标记边框之间的间距2倍

子标记之间的间距是子标记与父标记边框之间的间距2倍

justify-content: space-around;

父标记宽度200px
CSS 弹性布局
父标记宽度500px
CSS 弹性布局
父标记宽度800px
CSS 弹性布局

space-evenly:间距平均

子标记之间的间距和子标记与父标记边框之间的间距相等

justify-content: space-evenly;

CSS 弹性布局

总结

justify-content主轴排列方式:

  1. flex-start主轴水平是左对齐,主轴是垂直上对齐
  2. flex-end主轴水平是右对齐,主轴是垂直下对齐
  3. center主轴水平是整体水平居中,主轴是垂直的整体垂直居中
  4. space-between主轴水平左右两端的子标记紧挨着父标记边框,主轴垂直上下两端的子标记紧挨着父标记边框,子标记之间间距相等
  5. space-around子标记之间的间距是子标记与父标记边框之间的间距2倍
  6. space-evenly子标记之间的间距和子标记与父标记边框之间的间距相等

侧轴排列方式

只需要在父标记中加上下面代码
根据上面主轴的显示效果,可以理解成把它们逆时针旋转90°

/* 侧轴排列 */
flex-direction: column;

justify-content:

比如说space-evenly:间距平均
子标记之间的间距和子标记与父标记边框之间的间距相等

justify-content: space-evenly;

CSS 弹性布局

align-items 侧轴排列方式

lign-items:侧轴排列方式
flex-start:侧轴垂直上对齐,侧轴水平左对齐
flex-end:侧轴垂直下对齐,侧轴水平右对齐
center:侧轴垂直居中,侧轴水平居中
align-items: flex-start;垂直方向上这几个标记靠上方

【案例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
            width: 500px;
            height: 300px;
            border: 2px solid black;
            margin-top: 50px;
            margin-left: 100px;
            /* 弹性布局 */
            display: flex;
            /* 主轴方向 column主轴方向是垂直的,row主轴方向是水平的(行)*/
            flex-direction: row;
            flex-wrap: wrap;

            justify-content: flex-start;
            /* align-items,侧轴排列方式 */
            align-items: flex-start;
        }
        .s{
            width: 80px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- div.p>div{div$}.s*5 公式生成-->
    <div class="p">
        <div class="s">div1</div>
        <div class="s">div2</div>
        <div class="s">div3</div>
        <div class="s">div4</div>
        <div class="s">div5</div>
    </div>

</body>
</html>

align-items: flex-start;侧轴垂直上对齐,侧轴水平左对齐
CSS 弹性布局

align-items: flex-end;侧轴垂直下对齐,侧轴水平右对齐
CSS 弹性布局
align-items: center;侧轴垂直居中,侧轴水平水平居中
CSS 弹性布局


align-content 侧轴排列方式(多行)

align-content侧轴排列方式与align-items侧轴排列方式区别在于:多行显示时会看出效果

首先看一下

align-items: center; 
/* align-content: center; */

【案例代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
         /* 此处把宽度改小,使其多行显示 */
            width: 200px;
            height: 300px;
            border: 2px solid black;
            margin-top: 50px;
            margin-left: 100px;
            /* 弹性布局 */
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            justify-content: flex-start;

            align-items: center; 
            /* align-content: center; */
        }
        .s{
            width: 80px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- div.p>div{div$}.s*5 公式生成-->
    <div class="p">
        <div class="s">div1</div>
        <div class="s">div2</div>
        <div class="s">div3</div>
        <div class="s">div4</div>
        <div class="s">div5</div>
    </div>

</body>
</html>

每一行中都在中间
CSS 弹性布局

 /* align-items: center;  */
 align-content: center;

CSS 弹性布局

flex 子标记样式

前面的标记都放在了父标记中,只有flex是唯一一个安排在子标记中的样式

flex是弹性布局中唯一一个设置在子标记中的样式
flex:整数;子标记占据父标记尺寸空间的比例
flex: 0 0 整数px; 代表子标记固定的尺寸,【0 0】:不压缩不扩大,固定

第一种写法:子标记中写数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .p{
            width: 400px;
            height: 200px;
            border: 2px green solid;
            /* 变弹性盒子 */
            display: flex;
        }
        .p>div{
            height: 100px;
        }

        .s1{
            background-color: red;
            flex: 1;
        }
        .s2{
            background-color: yellow;
            flex: 2;
        }
        .s3{
            background-color: blue;
            flex: 2;
        }
    </style>
</head>
<body>
    <div class="p">
        <div class="s1"></div>
        <div class="s2"></div>
        <div class="s3"></div>
    </div>
</body>
</html>

CSS 弹性布局
第二种写法:固定样式写法

这里以s1举例

        .s1{
            background-color: red;
            /* s1,固定150px */
            flex: 0 0 150px;
        }

flex: 0 0 整数px; 代表子标记固定的尺寸,【0 0】:不压缩不扩大,固定

输出效果:
s2和s3是125×100
CSS 弹性布局文章来源地址https://www.toymoban.com/news/detail-514059.html


到了这里,关于CSS 弹性布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS3弹性布局

    2009年,W3C提出一种崭新的布局方案—弹性盒(Flexbox)布局,使用该模型可以轻松地创建自适应窗口的流动布局,或者自适应字体大小的弹性布局。W3C的弹性盒布局分为旧版本、新版本及混合过渡版本3种不同的设计方案,其中混合过渡版本主要针对IE10进行兼容。目前,CSS3弹性布

    2024年02月06日
    浏览(47)
  • CSS弹性布局常用设置

    目录 一、单位元素 二、弹性容器 三、常用属性 三、项目实战效果 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1vm 去适配 初始化 设置一个容器元素为弹性块状元素(内部允许有弹性元素flex撑开)   

    2024年02月11日
    浏览(51)
  • css 弹性布局的详细说明

    CSS弹性布局(Flexible Box Layout,简称Flexbox)是一种用于创建自适应和可伸缩布局的CSS模块。它提供了一种简单而强大的方式来对容器中的子元素进行布局,使它们能够自动调整大小、排列和对齐。 Flexbox通过在容器和子元素上应用一些特定的CSS属性来实现布局。下面是一些常用

    2024年02月16日
    浏览(44)
  • CSS3弹性盒布局详解

    弹性盒( Flexible Box 或 Flexbox) 布局是CSS3提供的一种新的布局模式,是一种当页面需要适应不同的屏幕大小及设备类型时,确保元素拥有恰当行为的一种布局方式。 弹性盒的结构: 从图中所知,弹性盒由 弹性容器 , 弹性子元素 和 轴 构成,在默认情况下,弹性子元素的排布

    2024年01月18日
    浏览(43)
  • html&CSS-----弹性布局案例展示

    目录 前言 效果展示 ​编辑 代码 思路分析         上一期我们学习了弹性布局,那么这一期我们用弹性布局来写一个小案例,下面看代码(上一期链接htmlCSS-----弹性布局_灰勒塔德的博客-CSDN博客) html代码: CSS代码: 首先我们去创建一个大盒子box,作为容器,里面放入5个

    2024年02月12日
    浏览(45)
  • css3 flex弹性布局详解

    2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写,意为\\\"弹性布局\\\",用来为盒状模型提供最大的灵活性。 开启flex布局:

    2024年02月05日
    浏览(45)
  • css之Flex弹性布局(父项常见属性)

    本篇博客会讲解css中的弹性布局的常见用法, 将一个div定义成flex容器,它分为主轴与交叉轴(其中左右边对应主轴的 start、end ,上下边对应交叉轴的 start、end ) 🪂行排列 flex-direction: row 🪂将行排列进行翻转排列 flex-direction: row-reverse 注意:由于翻转时主轴的start、end会进

    2024年02月08日
    浏览(52)
  • JavaWeb-CSS的盒模型与弹性布局

    每一个HTML就相当于一个矩形的\\\"盒子\\\". 这个盒子由以下几个部分组成 边框 border 内容 content(下图中间蓝色部分) 内边距 padding 外边距 margin 边框 边框的基础属性: 粗细: border-width 样式: border-style 颜色:border-color 接下来我们设计一个500x250的盒子 我们为其设置一个边框 我们会发现

    2024年02月07日
    浏览(42)
  • 第二章:CSS基础进阶-part3:弹性例子布局

    1、普通盒模型 2、弹性盒布局 使用弹性盒布局能让容器的宽度跟随浏览器窗口的变化而变换 这是一个简写flex-direction和flex-wrap属性。共同定义了flex容器的主轴和交叉轴。默认是row nowrap。

    2024年02月13日
    浏览(43)
  • 【前端】CSS(引入方式+选择器+常用元素属性+盒模型+弹性布局)

    层叠样式表(Cascading Style Sheets) 对元素位置的排版进行精确控制,实现结构和样式的分离 CSS 控制页面的展示效果 HTML决定页面的结构 选择器+{一条/N条声明} 选择器:要修改谁 声明:具体要修改什么内容。声明的属性是键值对,用分号区分,键和值用: 通常情况下,把style放

    2024年04月15日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包