精华内容
下载资源
问答
  • #网页设计#在网页设计中内容的排版和布局往往是整个设计工作的重点和难点,如果能熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果。尤其是对非专业的或刚开始从事前端...

    #网页设计#在网页设计中内容的排版和布局往往是整个设计工作的重点和难点,如果能熟练掌握CSS弹性布局的话,无论是页面的整体设计还是局部内容的布局,都能起到事半功倍的效果。尤其是对非专业的或刚开始从事前端开发的人,掌握了这种布局方式会让人有一种瞬间顿悟的感觉:网页布局也不过如此嘛。下面让我们一起来看看CSS弹性布局的奇妙之处。

    3efdce5f7bc3cc319a14e713e0b577d8.png

    首先在我们在屏幕生成一个宽300px,高200px的DIV作为容器,通过display: flex属性,可将该DIV声明为块级弹性容器

    .div1{display:flex;width:300px;heigth:200px;border: 1px solid orange;}

    c8c59c6847513a40679b0a25cc7ed4d9.png

    我们可以把这个容器想象成一个箱子,往箱子里面摆放了三个球,下面看看球的几种摆放方式,先定义一个球的样式

    .ball {width: 50px;height: 50px;border: 1px solid #2196f3;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 28px;}

    将球放进容器里

    9492fea7e490bd68aa78e55119b6a9aa.png

    定义了6中摆放方式,其中第一排箱子主要应用了justify-content属性,这个属性可以理解为水平对齐方式,第二排主要应用了align-items属性,这个属性可以理解为垂直的对齐方式。具体的属性值请参考下表。

    144105621a3b23789474dba1b9c5beaa.png左上角第一个为序号1,以此类推

    ca9bcb75375da41732d265a3527f7a0b.png

    除了上面6种对齐方式外,还有很多很多种,感兴趣的可以一一尝试一下。只要把块级元素声明为弹性的,里面的元素可以通过各种方式随意摆放。如果箱子里面的球太多的话,也可以设置为自动换行方式,设置属性flex-wrap: wrap即可

    flex-wrap: wrap;justify-content: space-around;align-content: flex-start;

    通过属性flex-wrap:wrap设置箱子内的球自动换行,同是将水平对齐设置为两头有空白的两端对齐(space-around,两头没有空白的是space-between),将垂直对齐方式设置为顶部对齐align-content: flex-start,得到下图的摆放方式。

    07c253b22c3ffeeb6064da67b2cf6dcd.png

    在了解了弹性布局后我们来看看实际项目中有哪些地方可以用到弹性布局来快速解决问题

    完全居中对齐

    有时我们想在一个格子内显示的文本或图片要水平和垂直方向都是居中对齐的,就是显示在格子的正中央,使用弹性布局的水平和垂直方向都是居中对齐即可。本文中上例的球体内的文字就是这种显示方式,样式设置如下:

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

    平均分配宽度

    很多APP的底部菜单的宽度都是平均分配,主要应用了属性 flex:1,其中1代表占了1份。

    将球的样式 .ball 修改为

    display: flex;justify-content: center;align-items: center;flex: 1;height: 50px;

    1d0afea0ce950a2f315865c25c63304c.png

    模仿百家号APP的底部菜单,效果图是这样

    2db49c50c6d1adaa57bc0c60d175ff52.png

    底部有5个菜单每个菜单的flex值都是1,可以理解为每个菜单的宽度是1/5,于是就可以平均分配宽度了。把flex的值设置为2也可以,只要每个菜单的值一样,它们的宽度就是一样的。所以如果把【首页】的flex值设置为2,其它菜单的flex值设置为1,相当于把箱子的宽度平均分为6份,【首页】占了2/6,其他的占了1/6,即首页的宽度是其它菜单宽度的2倍。

    一边的宽度固定,另一边的宽度自由伸缩

    主要还是用到属性flex,固定宽度的那一边将宽度设置为固定值,另一边的flex值设为1,应用下面的样式来看看效果

    .left{width: 100px; border-right: 1px solid darkgray;}.right{ flex: 1; }

    f265c94acaca1f7b84923e415a6c5eff.png

    这时如果改变箱子的宽度,我们会发现左边的宽度会保持在100px,而右边的宽度会随着箱子宽度的改变而改变。

    除了这些例子外,弹性布局还有很多很方便快捷的布局方式,主要多尝试,熟练运用,应对常规的网页布局是绰绰有余。

    举报/反馈

    展开全文
  • 该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。 2)多行 设置该元素 css 属性:display: table-cell; vertical-align: middle;,还需设置该元素的父级元素 css 属性:display: ...

    在这里插入图片描述
    块元素垂直居中问题采用 flex 解决。

    行内元素垂直居中问题解决如下:

    1)单行

    该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。

    2)多行

    设置该元素 css 属性:display: table-cell; vertical-align: middle;,还需设置该元素的父级元素 css 属性:display: table;

    展开全文
  • 弹性盒子使用弹性布局,首先要将父盒子定义为弹性盒子。display: flexdisplay: inline-flex 行级弹性盒子,类似inline-block弹性元素弹性盒子内的元素称为”弹性元素“。弹性布局实际上就是要对弹性元素的排列做各种...

    弹性盒子

    使用弹性布局,首先要将父盒子定义为弹性盒子。

    display: flex

    display: inline-flex 行级弹性盒子,类似inline-block

    弹性元素

    弹性盒子内的元素称为”弹性元素“。

    弹性布局实际上就是要对弹性元素的排列做各种设置。

    排列方向

    flex-direction: row / row-reverse / column / column-reverse

    默认是row(从左向右)

    溢出换行

    flex-wrap: wrap / wrap-reverse

    如果不添加溢出换行,默认溢出是元素自动调整宽高以适应。

    组合设置

    flex-flow: row wrap

    同时设置flex-direction和flex-wrap。

    主轴与交叉轴

    主轴由元素的排列方向决定即flex-direction。

    如果flex-direction为row则主轴为水平从左向右,为row-reverse则主轴为水平从右向左。

    如果flex-direction为column则主轴为垂直从上往下,为column-reverse则主轴为垂直从下往上。

    交叉轴由元素的换行方向决定即flex-wrap。

    如果flex-flow: row wrap 则 主轴水平,交叉轴垂直从上往下;flex-flow: row wrap-reverse 则 主轴水平,交叉轴垂直从下往上。

    如果flex-flow: column wrap 则主轴垂直,交叉轴水平从左向右;flex-flow: column wrap 则主轴垂直,交叉轴水平从右向左。

    主轴和交叉轴对应于当前元素排列方向和换行方向。

    主轴的排列方式

    主轴的排列方式表示元素在主轴上从哪开始到哪儿结束以及是否均匀分布

    justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly

    默认为flex-start 即 靠在的主轴的开始端(比如主轴从左向右,则靠在左边)

    flex-start 即 靠在的主轴的结束端(比如主轴从左向右,则靠在右边)

    center 即 居中排布

    space-between 即 两侧的元素靠两边,中间的元素均匀分布

    space-around 即 每个元素的两边都有相同的间距

    space-evenly 即 元素均匀分布(两侧元素不靠两边)

    交叉轴的对齐和排列

    如前文所说,交叉轴始终和主轴垂直,并且起点和终点由flex-wrap决定。交叉轴的排列方式类似于主轴,但部分属性值不同。

    交叉轴的排列有两个属性:align-items,align-content。align-items表示元素整体的对齐方式,align-content表示元素在交叉轴的排列方式。

    align-items: flex-start / flex-end / center / stretch

    flex-start,flex-end,center表示元素整体对齐方式

    stretch 即 如果弹性元素本身没有宽高,则在交叉轴方向进行拉伸充满容器

    align-content: flex-start/ flex-end / center / space-between / space-around / space-evenly

    align-content和主轴排列方式相同。

    align-content只有存在flex-wrap属性时才生效。

    单个元素的交叉轴控制

    align-items表示整体元素的对齐方式,同时也可以对单个元素进行控制。

    align-self:flex-start / flex-end /stretch

    align-self的效果和align-items类似只是作用于单个弹性元素

    主轴基准尺寸

    主轴基准尺寸定义了弹性元素的宽高并且优先级高于元素自身的宽高。

    flex-basis: 100px

    元素可用空间的分配

    如果元素无法占满整行或整列,那么可以对剩余空间进行分配实现元素拉伸填充满整个空间。

    flex-grow: 1

    flex-grow表示剩余空间分得几份,如果有两个div元素分别flex-grow:1, flex-grow:2且剩余空间为300px,则第一个div分得(300/3)1=100px,第二个div分得(300/3)2=200px;

    flex-grow是作用在主轴上的。

    元素缩小比例

    如果元素在一行或一列放不下且没有换行,默认情况下元素会等比例缩小,但是我们可以控制单个元素缩小的比例。

    flex-shrink: 1

    flex-shrink 表示缩小的比例,但和flex-flow不同不能直接按照“要缩小的总像素”进行切分,而是通过一个公式:(200 / (1*200+2*400))*1*200【假设“要缩小的总像素”为200px,两个div宽度为200px,400px;缩小比例为:1,2,则计算结果为第一个div要缩小的像素】

    元素组合定义

    flex-grow,flex-shrink,flex-basis可以组合定义为flex。

    flex: 1 1 100px;

    等同于 flex-grow:1; flex-shrink:1; flex-basis: 100px;

    元素的排列顺序

    可以通过order属性控制弹性元素的顺序

    order: 1

    order默认数值为0,数值越大越往后排

    对文本进行弹性布局

    弹性布局对文本节点也可以生效。

    article {

    width: 200px;

    height: 200px;

    border: solid 2px red;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    }

    hello

    多级菜单布局案例

    Document

    * {

    padding: 0;

    margin: 0;

    }

    body {

    height: 100vh;

    display: flex;

    flex-direction: column;

    background-color: #eee;

    }

    main {

    flex: 1;

    }

    footer {

    height: 50px;

    background-color: #ccc;

    display: flex;

    }

    footer section {

    display: flex;

    flex-direction: column-reverse;

    flex: 1;

    border-right: solid 1px #bbb;

    }

    footer section:last-child {

    border-right: none;

    }

    footer section h4 {

    flex: 0 0 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    }

    footer section ul {

    display: flex;

    flex-direction: column;

    margin: 5px;

    border: solid 1px #bbb;

    border-radius: 10px;

    }

    footer section ul li {

    display: flex;

    justify-content: center;

    align-items: center;

    flex: 0 0 50px;

    border-bottom: solid 1px #bbb;

    cursor: pointer;

    }

    footer section ul li:last-child {

    border-bottom: none;

    }

    教程

    • Java
    • CSS

    问答

    直播

    74453e9a0adf4fb1ba8a935ce2f78f0d.jpg

    展开全文
  • 左对齐前 左对齐后 html: <h1 class="module-title">核心产品h1> <ul class="core-top"> <li v-for:'xxx'> <img :src="xxx" alt="" /> <div class="content"> <h3>xxxh3> <p>xxxp> div> li> ul> 实现flex布局最后...

    设计案例:

    左对齐前在这里插入图片描述

    左对齐后在这里插入图片描述
    html:

    <h1 class="module-title">核心产品</h1>
    <ul class="core-top">
    	<li v-for:'xxx'>
    		<img :src="xxx" alt="" />
            <div class="content">
    	        <h3>xxx</h3>
    	        <p>xxx</p>
            </div>
        </li>
    </ul>
    

    实现flex布局最后一行左对齐的其中的一种方法样式:

    ul.core-top {
        margin: 0 20px;
        height: 636px;
        // background-color: skyblue;
        
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 48px 0 20px;
    
        li {
          width: 353px;
          height: 102px;
          margin-bottom: 40px;
          // background-color: pink;
        }
    
        // 若最后一行列表元素不足每行最大元素个数,则让所有元素左对齐
        &::after {
          content: '';
          width: 353px;  /*伪元素的宽度与子元素的宽度一致*/
        }
      }
    
    展开全文
  • 1.弹性布局 设置方式:display:flex(默认按行显示),默认水平轴为x轴,当按列显示时竖着的为x轴。 弹性布局常用属性: justify-content(设置x轴的内容布局方式):默认从头(起点)flex-start排列,space-...
  • CSS弹性布局总结

    2021-04-29 16:48:51
    CSS弹性布局1. 弹性盒子声明2. 弹性盒子规则2.1 弹性元素布局方式2.2 弹性元素溢出处理2.3 flex-direction和flex-wrap的组合写法2.4 主轴和交叉轴2.5 主轴对齐方式2.6 交叉轴对齐方式3. 弹性元素规则3.1 弹性元素在...
  • css弹性布局样式总结

    2021-03-01 08:27:34
    弹性布局,采用Flex布局的元素。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ ...
  • css弹性布局

    2021-06-19 08:17:52
    根据语法添加的位置不同分为两部分... 设置盒子2).flex-direction: 布局的排列方向 (主轴排列方向)row; 默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。row-reverse; 显示为行。但方向和row属...
  • 弹性布局里,父元素称为容器,子元素称为项目。项目排列由容器控制,控制属性都写在容器里。要使用弹性布局,要先使父元素display:flex; 例:以下写了项目的排列方式、项目换行、项目的对齐方式 <!-- ...
  • CSS弹性布局 Flex属性

    2021-12-13 20:06:16
    CSS弹性布局 Flex属性 自适应布局 flex属性
  • Css 弹性布局

    2021-02-27 15:14:45
    弹性布局 display:flex 要发生弹性布局的子元素,他们的父元素,成为容器需设置display:flex,flex将块级元素设置为容器, inline-flex将行内元素设置为容器 元素设置为flex容器后,容器的text-align,vertical-...
  • 前端——CSS弹性布局

    2021-07-12 01:23:25
    Flexible Box Layout 布局 打开Flexible Box Layout :display:flex; 基本布局排列—>主轴(main axis)和交叉轴(cross axis) ...默认:主轴(main axis)是... ```css .container { flex-direction: column-
  • CSS 弹性布局(flex)总结

    2021-03-26 14:27:16
    一、弹性布局概念 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性 对于特殊布局非常不方便,比如,垂直居中 注:常用的全屏居中的CSS body { height: 100vh; text-align: center; ...
  • css布局 一、知识补充 1. 浮动的特性 只会影响后面的元素 文本不会被浮动元素覆盖(浮动的特性就是图文混合) 具备内联盒子特性:宽度由内容决定 具备块级盒子特性:支持所有样式 浮动放不下,会自动折行 template...
  • PS:弹性布局适用于较简单的场景,过于复杂的场景可以尝试着使用CSS3的Grid布局,弹性布局在PC端中还存在兼容性问题,移动端中无兼容性问题,可以放心使用。1.容器属性css3为新增的弹性布局提供了多个属性,分别为...
  • CSS弹性布局

    2021-08-21 18:40:07
    CSS弹性布局 弹性布局的介绍 弹性布局的英文是flexbox,简写flex。 弹性布局又称伸缩盒布局。弹性布局有容器、元素两大要素,元素可以随着容器大小的变化,自动改变大小,但是元素之间会按照一定的比例排布,使...
  • 弹性盒子基础弹性盒子(Flexible Box)是css3中盒子模型的弹性布局,在传统的布局方式上增加了很多灵活性。定义一个弹性盒子在父盒子上定义display属性:#box{display: -webkit-flex; //webkit内核浏览器的兼容设置,...
  • 后来才想到CSS3还有这么一个属性。现在跟大家分享一下。源码:Flex布局.con {/* 要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上。默认情况下,所有的直接子元素都被认为是 flex 项,并从左...
  • 前言 我们知道,网页展示就好比一个个盒子堆叠在一起,通过调整盒子的大小、位置...Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box {
  • css弹性布局是什么?

    2021-06-13 09:03:21
    css弹性布局(flex)是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。CSS...
  • 1、弹性布局flex flex布局表示弹性布局,为盒字模型提供最大的灵活性。 .red_box{ background-color: red; height: 200px; width: 600px; display: flex; } .yellow_box1{ background-color:yellow; width:...
  • 上篇利用css弹性布局中的justify-content和align-self属性很便捷的完成了骰子点数的布局。在flex弹性布局中还有很多常用的属性,下面来依次看看吧~ 声明弹性盒子 定义为弹性盒子(容器)display: flex;定义为内联级...
  • 标签:弹性布局的名称概念:1、容器:需要添加弹性布局的父元素;项目:弹性布局容器中的每一个子元素,称为项目。2、主轴:在弹性布局中,我们会通过属性规定水平/垂直方向(flex-direction)为主轴;与主轴垂直的另...
  • css弹性布局flex

    2021-07-21 19:01:41
    row-reverse 这个只是方向不同其实还是一样 flex-direction : column 效果与之相反 column-reverse justfy-countent 类似 flex-direction : row 只不过比那个多了几个属性方便布局 flex-start: 弹性项目向行头紧...
  • 伸缩盒布局:容器、元素 弹性伸缩比例、自动留白间隙、手机端 使用条件: 1、父元素不能overflow:hidden或者overflow:auto属性。 2、必须指定top、bottom、left、right4个值之一,否则只会处于相对定位 3、...
  • 内容对齐(justify-content)属性应用在弹性容器上,把弹性...注意:弹性布局中有两个基本术语main axis和cross axis,一般情况下,我们可以把它们各自看作是屏幕上的行向和列向(但是严格讲,这和写模式以及弹性流方向...
  • html/css弹性布局的几大常用属性详解弹性布局的名称概念:1、容器:需要添加弹性布局的父元素;项目:弹性布局容器中的每一个子元素,称为项目。2、主轴:在弹性布局中,我们会通过属性规定水平/垂直方向(flex-...
  • CSS 弹性布局 flex

    2021-10-13 10:08:04
    弹性布局 display:flex; 居中等分 justify-content:center; 布局方向(方向 direction;行 row;列 column) flex-direction:column; <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=...
  • 笔记:CSS弹性布局

    2021-12-13 14:01:16
    容器:需要添加弹性布局的父元素。 项目:弹性布局容器中的每一个子元素,称为项目。 基本方向: 主轴:在弹性布局中,我们会通过属性规定水平/垂直方向为主轴。 交叉轴:与主轴垂直的方向,称为交叉轴。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,780
精华内容 11,512
关键字:

css弹性布局