精华内容
下载资源
问答
  • flex实现三栏布局

    2021-04-15 16:09:08
    flex实现三栏布局,两边固定,中间宽度自适应 效果图 html部分 <div class="outer"> <div class="right"></div> <div class="center"></div> <div class="left"></div&...

    flex实现三栏布局,两边固定,中间宽度自适应

    效果图
    在这里插入图片描述

    html部分

    <div class="outer">
        <div class="right"></div>
        <div class="center"></div>
        <div class="left"></div>
    </div>
    

    CSS部分

    .outer{
        display: flex;
        height: 100%;
        width: 100%;
    }
    .right{
      width: 300px;
      background-color: red;
      height: 300px;
    }
    .center{
    flex: 1;
    background-color: yellow;
    height: 300px;
    }
    .left{
        width: 300px;
        height: 300px;
        background-color: blueviolet;
    }
    

    利用flex实现三栏布局非常简单

    展开全文
  • <div class='box1'></div> ... display flex flex-direction:column } .box2{ flex-grow: 1; } .box1,.box2{ flex 0 0 100px } 复制代码 固定宽高的可直接设置宽高,有时候会无效,可如上设置
    <div class='wrap'>
        <div class='box1'></div>
        <div class='box2'></div>
        <div class='box3'></div>
    </div>
    <style>
        .wrap{
            height: 100%;
            display flex
            flex-direction:column
        }
        .box2{
            flex-grow: 1;
        }
        .box1,.box2{
            flex 0 0 100px
        }
    </style>
    复制代码

    固定宽高的可直接设置宽高,有时候会无效,可如上设置

    展开全文
  • 三栏浮动布局 浮动的方式有很多种,比如像下面这个例子,是把左右两个板块固定大小和位置,中间自适应。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...

    三栏浮动布局

    浮动的方式有很多种,比如像下面这个例子,是把左右两个板块固定大小和位置,中间自适应。
    先看效果

    窗口最大化

    在这里插入图片描述

    缩小化

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏浮动布局</title>
        <style type="text/css">
            .wrapper{
                width: 100%;
                height: calc(100vh);
                background-color: bisque;
                box-sizing: border-box;
            }
            .wrapper .left {
                width: 200px;
                height: 300px;
                background: #faa;
                float: left;
            }
            .wrapper .right {
                width: 200px;
                height: 300px;
                background: #afa;
                float: right;
            }
            .wrapper .content {
                height: 300px;
                background-color: #aaf;
                margin:0 200px;
            }
        </style>
    </head>
    <body>
        <!-- 三栏浮动布局 -->
        <div class="wrapper">
            <div class="left"></div>
            <div class="right"></div>
            <div class="content"></div>
        </div>
    </body>
    </html>
    

    在缩小窗口后,左边和右边的板块就会把中间的板块挤掉,或者覆盖重叠
    (窗口缩小后就只能看到左右栏,这感觉就很像某些网页侧边广告,不信你试试)。
    在这里插入图片描述
    缩小后
    在这里插入图片描述

    inline-block方式

    使用外部div添加align-center属性,内部三个板块添加inline-block属性来实现
    先看效果吧

    窗口最大化

    在这里插入图片描述

    缩小后

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>三栏inline-block布局</title>
        <style type="text/css">
    	.main-container{
    		  position: absolute;
    		  background-color: darkgrey;
    		  text-align: center;
    		  margin-left: 0;
    		  margin-right: 0;
    		  left: 0;
    		  right: 0;
    	}
    	.part-left{
    		  background-color: #0ac276;
    		  display: inline-block;
    	}
    	.part-right{
    		  background-color: aqua;
    	      display: inline-block;
    	}
    	.part-center{
    		  background-color: coral;
    	      display: inline-block;
    	}    
    	</style>
    </head>
    <body>
        <div class="main-container">
            <div class="part-left">
                <div style="width: 200px; height: 200px;background-color: blue;">
                </div>
            </div>
            <div class="part-right">
                <div style="width: 200px; height: 200px;background-color: brown;">
                </div>
            </div>
            <div class="part-center">
                <div style="width: 200px; height: 200px;background-color: rgb(51, 30, 30);">
                </div>
            </div>
        </div>
    </body>
    </html>
    

    当然如果你想让这几个板块之间保持间距,可以为目标div添加上margin属性,比如margin-left或者margin-right这样。浮动和非浮动这两种方法各有特点(也许可以做到一样的效果呢,可能是我太菜了没想到而已)

    使用Flex实现

    关于Flex介绍可以看看阮老师的blog
    先看效果

    窗口最大化

    在这里插入图片描述

    缩小化

    在这里插入图片描述

    <!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>
        .wrapper{
          background-color: bisque;
          width: 100%;
          height: calc(100vh);  /*设置div的高度height为calc(100vh)即可,100vh = 视窗高度的100%*/
          display: flex;           /*弹性布局*/
          justify-content: center; /*水平居中*/
          align-items: center;     /*垂直居中*/
        }
        .wrapper .part-left{
          background-color: rgb(161, 59, 59);
          width: 200px;
          height: 200px;
        }
        .wrapper .part-center{
          background-color: rgb(58, 156, 58);
          width: 200px;
          height: 200px;
        }
        .wrapper .part-right{
          background-color: darkturquoise;
          width: 200px;
          height: 200px;
        }
      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="part-left"></div>
        <div class="part-center"></div>
        <div class="part-right"></div>
      </div>
    </body>
    </html>
    

    目前个人比较喜欢用inline-block和flex方法吧。float其实也行,不过的话要注意清除浮动,否则会出现意料之外的情况.

    展开全文
  • Flex布局在传统的方式中,我们通常使用display、position、float等属性进行布局,对于一些特殊不记录运行起来不是很方便,比如垂直居中,如果运用了浮动特性的话,就需要清除浮动,不但比较麻烦,一不小心还会出现...

    Flex布局

    在传统的方式中,我们通常使用display、position、float等属性进行布局,对于一些特殊不记录运行起来不是很方便,比如垂直居中,如果运用了浮动特性的话,就需要清除浮动,不但比较麻烦,一不小心还会出现意料之外的布局,最后呈现的结果往往不尽人意

    Flexbox(全称Flexible Box)布局,也叫Flex布局,意为‘弹性布局’,顾名思义,Flex布局中的元素具有可伸缩性,是的,通过设置父元素的display属性为display:flex|inline-flex;其子元素便有了伸缩性,即使在子元素的宽高不确定的情况下,也能通过设置相关css属性来决定资源安苏的对齐方式、所占比例和空间分布

    一些概念

    在开始学习Flex布局前,我们先来熟悉下有关Flex布局的几个概念,这些概念可以帮助我们对后文的理解。

    056f19b9189c3241aa6389859da0941e.png

    (基本概念预览,图来源于网络)

    上面便是一个Flex布局的大致架构了,图中的囊括概念有几点:

    Flex布局是一整个模块,其中父元素称为flex container,意为容器;子元素称为flex item,意为项目;

    Flex布局中有两条看不见的轴线,主轴(main axis)和交叉轴(cross axis)。默认的主轴是水平的,交叉轴是垂直于主轴的;

    主轴开始的位置叫main start,结束位置叫main end;交叉轴的开始位置叫cross start,结束位置叫cross end;

    子元素在主轴方向上的大小称为main size,在交叉轴方向上的大小称为cross size。

    在上面的概念中,比较重要的是主轴、交叉轴,和他们的开始位置、结束位置。子元素在父元素中会沿着主轴从main start到main end排列,沿着交叉轴从cross start 到 cross end 排列。在常规的布局中,浏览器是从左到右排列,挤不下就换行,在这种情况下,主轴是水平方向,交叉轴是垂直方向,主轴是从左到右,交叉轴从上到下。

    在Flex布局中,默认的主轴方向也是水平的,交叉轴是垂直的,通过改变flex-direction和flex-wrap的属性值可以分别改变两个轴的方向和他们开始的位置、起始位置,这就让布局更加灵活多变了

    了解完Flex布局相关的抽象概念,接下来我们来看看有关Flex布局的属性部分,这里分为两部分介绍,一时作用于父元素(容器)的,二是作用于子元素(项目)的。

    容器属性

    display属性用来将父元素定义为Flex布局的容器,设置display值为display:flex容器对外表现为块级元素;display:inline-flex,容器对外表现为行内元素,对内两者表现是一样的。

    复制代码.container{

    display: flex | inline-flex;

    }

    复制代码

    上面代码就定义了一个Flex布局的容器,我们有以下六个属性可以设置在容器上

    flex-direction

    flex-wrap

    flex-flow

    justify-content

    align-items

    align-content

    flex-direction

    flex-direction定义了主轴的方向,即项目的排列方向

    1
    2
    3
    4

    复制代码.container {

    flex-direction: row | row-reverse | column | column-reverse;

    }

    复制代码row(默认值):主轴在水平方向上,起点在左侧,也就是我们常见的从左向右

    row-reverse:主轴水平方向,起点在右侧

    column:主轴在垂直方向,起点在上沿

    column-reverse:主轴在垂直方向,起点在瞎眼2

    98002569205e753076107972699548ac.png

    (flex-direction为row)

    d1e2b3518c0fcdadde4ed9a6ee334644.png

    (flex-direction为row-reverse)

    678e7329a372e53ae375da865f5fa532.png

    (flex-direction为column)

    6f2f72edc22868a9281c219cb13748a9.png

    (flex-direction为column-reverse)

    flex-wrap

    默认情况下,项目是排成一行显示的,flex-wrap用来定义当一行放不下时,项目如何操作

    .container{

    flex-wrap:nowrap|wrap|wrap-reverse

    }

    复制代码

    假设此时主轴方向是从左到右的水平方向

    nowrap(默认):不换行

    wrap: 换行,第一行在上面

    wrap-reverse:换行,第一行在下面

    a9e86f2495153bcb2f844323eac4b830.png

    (flex-wrap为nowrap)

    ae0b7c6765682aea046da1cffdbdce1f.png

    (flex-wrap为wrap)

    9dbe3d5317cfc5ca8e618391d1d4d0db.png

    (flex-wrap为wrap-reverse)

    将flex-wrap设置为wrap-reverse可以看做是调换了交叉轴的开始位置(cross start)和结束位置(cross end)

    flex-flow

    flex-flow是flex-direction和flex-wrap的简写,默认值为row no-wrap

    .container{

    flex-flow: row no-wrap

    }

    复制代码

    justify-content

    justify-content 定义了项目在主轴上的对齐方式。

    .container {

    justify-content: flex-start | flex-end | center | space-between | space-around;

    }

    复制代码

    flex-start(默认):与主轴的起点对齐;

    flex-end:与主轴的终点对齐;

    center:项目居中;

    space-between:两端对齐,项目之间的距离都相等;

    space-around:每个项目的两侧间隔相等,所以项目与项目之间的间隔是项目与边框之间间隔的两倍。

    假设此时主轴是从左到右的水平方向,下面给出了不同属性值的效果图。

    8703edcb86ed4087d4588211c1133aa5.png

    (justify-content 为 flex-start)

    cf122ed60d027401419ac67a065a49b7.png

    (justify-content 为 flex-end)

    e721adb526f268cb6b3e0d441d1aac1c.png

    (justify-content 为 center)

    9c2d83fd346e49dc9189c2c845df14e4.png

    (justify-content 为 space-between)

    142dc5fdae2744eeb8e7fbd57dcaf8f4.png

    (justify-content 为 space-around)

    align-items

    align-items 定义了项目在交叉轴上如何对齐。

    .container {

    align-items: flex-start | flex-end | center | baseline | stretch;

    }

    复制代码

    flex-start:与交叉轴的起点对齐;

    flex-end:与交叉轴的终点对齐;

    center:居中对齐;

    baseline:项目第一行文字的基线对齐;

    stretch(默认值):如果项目未设置高度或者为 auto,项目将占满整个容器的高度。

    假设交叉轴是从上到下的垂直方向,下面给出了不同属性值的效果图。

    0745996ed83a47372ade0c3c9aa65fc7.png

    (align-items 为 flex-start)

    557015ee11d6a7dfc5dcfd627d64ebea.png

    (align-items 为 flex-end)

    c2ad7105bfc331897dc616d0b51cf149.png

    (align-items 为 center)

    c8492c8d70a8aaecaca2f474ab456973.png

    (align-items 为 baseline)

    ff89a1b4ead3e4ae01ec7aaf47eefa81.png

    (align-items 为 stretch)

    align-content

    align-content 定义了多根轴线的对齐方式,若此时主轴在水平方向,交叉轴在垂直方向,align-content 就可以理解为多行在垂直方向的对齐方式。项目排列只有一行时,该属性不起作用。

    .container {

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;

    }

    复制代码

    flex-start:与交叉轴的起点对齐;

    flex-end: 与交叉轴的终点对齐;

    center:居中对齐;

    space-bteween:与交叉轴两端对齐,轴线之间的距离相等;

    space-around:每根轴线两侧的间隔都相等,所以轴线与轴线之间的间隔是轴线与边框之间间隔的两倍;

    stretch(默认值):如果项目未设置高度或者为 auto,项目将占满整个容器的高度。

    8ad47262ecac174cfc54d01feac5f89f.png

    (align-content 为 flex-start)

    d7828b51b21019f554782be673443f2f.png

    (align-contet 为 flex-end)

    76ecbddbd67c25e99c848e588df07e07.png

    (align-content 为 center)

    a8cf548da725e0415a67c4ff438a50db.png

    (align-content 为 space-between)

    d0534cb6193c50f015340c299e2759bb.png

    (align-content 为 space-around)

    89a0e75a63a16ca8f33f43f286eef351.png

    (align-content 为 stretch)

    项目属性

    对项目设置属性,可以更灵活地控制 Flex 布局。以下六种属性可以设置在项目上:

    order

    flex-grow

    flex-shrink

    flex-basis

    flex

    align-self

    order

    order 定义了项目的排列顺序,默认值为 0,数值越小,排列越靠前。

    .item {

    order: ;

    }

    b4745e8ce70350a08be65c6b2536a05e.png

    (给第三个项目设置了 order: -1; 后,该项目排到了最前面)

    flex-grow

    flex-grow 定义了项目的放大比例,默认为 0,也就是即使存在剩余空间,也不会放大。

    如果所有项目的 flex-grow 都为 1,则所有项目平分剩余空间;如果其中某个项目的 flex-grow 为 2,其余项目的 flex-grow 为 1,则前者占据的剩余空间比其他项目多一倍。

    .item {

    flex-grow: ;

    }

    复制代码

    0dce7976976bb267e8247678c8894abc.png

    (所有项目的 flex-grow 都为 1,平分剩余空间)

    58b1be439aead02d0cc3f61a69d7a3a9.png

    (flex-grow 属性值越大,所占剩余空间越大)

    flex-shrink

    flex-shrink 定义了项目的缩小比例,默认为 1,即当空间不足时,项目会自动缩小。

    如果所有项目的 flex-shrink 都为 1,当空间不足时,所有项目都将等比缩小;如果其中一个项目的 flex-shrink 为 0,其余都为 1,当空间不足时,flex-shrink 为 0 的不缩小。

    负值对该属性无效。

    .item {

    flex-shrink: ;

    }

    复制代码

    27544924ccc776ae91969ab9bc75c481.png

    (空间不足时,默认等比缩小)

    6c4ba7dd6473e4f7471f7590d843aaf4.png

    (flex-shrink 为 0 的不缩小)

    flex-basis

    flex-basis 定义了在分配多余的空间之前,项目占据的主轴空间,默认值为 auto,即项目原来的大小。浏览器会根据这个属性来计算主轴是否有多余的空间。

    flex-basis 的设置跟 width 或 height 一样,可以是像素,也可以是百分比。设置了 flex-basis 之后,它的优先级比 width 或 height 高。

    .item {

    flex-basis: | auto;

    }

    复制代码

    fc408fb4047614a8919913f0f7337db5.png

    (不同的 flex-basis 值效果展示)

    flex

    flex 属性是 flex-grow、flex-shrink、flex-basis 的缩写,默认值是 0 1 auto,后两个属性可选。

    该属性有两个快捷值:auto(1 1 auto)和 none(0 0 auto)。auto 代表在需要的时候可以拉伸也可以收缩,none 表示既不能拉伸也不能收缩。

    .item {

    flex: auto | none | [ ? || ]

    }

    复制代码

    align-self

    align-self 用来定义单个项目与其他项目不一样的对齐方式,可以覆盖 align-items 属性。默认属性值是 auto,即继承父元素的 align-items 属性值。当没有父元素时,它的表现等同于 stretch。

    align-self 的六个可能属性值,除了 auto 之外,其他的表现和 align-items 一样。

    .item {

    align-self: auto | flex-start | flex-end | center | baseline | stretch;

    }

    复制代码

    1a61c5a664d09915d58037b0686a9963.png

    (第三个项目的对齐方式与其他不同)

    简单实例

    三栏布局

    还记得三栏布局实现么,如果使用 Flex 布局该如何实现呢?我们用上面的知识来尝试一下。首先给出基本代码:

    center
    left
    right

    .center {

    height: 150px;

    background-color: #94E8FF;

    }

    .left {

    width: 100px;

    height: 150px;

    background-color: #FFB5BF;

    }

    .right {

    width: 200px;

    height: 150px;

    background-color: #8990D5;

    }

    复制代码

    我们首先将容器设置为 Flex 布局:

    .container {

    display: flex;

    }

    复制代码

    接下来要解决的问题有,如何将 .left 排列在最左边,和如何将 .center 占满剩余空间。在项目属性的学习中,order 属性可以改变项目的排列顺序,flex-grow 可以定义项目的放大比例。没错,利用这两个属性便能解决我们的问题。

    .left {

    order: -1;

    }

    .center {

    flex-grow: 1; /* flex: 1; 也行 */

    }

    复制代码

    是不是很简单,Flex 布局相对于传统布局更灵活好用,上面只是给出了一个方法,更多的方法期待大家去探索。

    居中问题

    当子元素的高度不确定时,处理垂直居中就比较麻烦,但是使用 Flex 布局中容器有关对齐方式的属性便能快速解决,以下代码子元素在父元素中是水平、垂直居中的。

    .container {

    display: flex;

    justify-content: center;

    align-items: center;

    }

    复制代码

    布局的实现方式多种多样,多动手,勤加练习,综合考虑各种因素,根据需要找到最适合的方式才是最好的实现。阮一峰老师有给出 Flex 布局的一些实例,对实际场景很有用,推荐阅读:Flex 布局教程:实例篇。

    浏览器兼容性及其他

    设置为 Flex 布局后,子元素的 float、clear、vertical-align 属性都将失效。

    因为历史原因,W3C 对 flex 做了多次更新,也就导致了各浏览器支持度参差不齐。到目前为止,Flex 布局有一下几种写法:

    display: box; /* 2009 version 老语法 */

    display: flexbox; /* 2011 version 过渡语法 */

    display: flex | inline-flex; /* 2012 version 新语法 */

    复制代码

    从 Can I Use 上可以看出目前 Flex 布局对浏览器的支持情况。从中我们可以总结出新语法目前的支持情况:

    Chrome 29+

    Firefox 28+

    Safari 9+

    iOS Safari 9+

    Android 4.4+

    IE Mobile 11+

    复制代码

    更低的版本需要加上前缀进行支持,不同版本所在时期不同也会导致属性值不同,这里有一个推荐的兼容性写法:

    .page-wrap {

    display: -webkit-box; /* 老语法 iOS 6-, Safari 3.1-6 */

    display: -moz-box; /* 老语法 Firefox 19- (buggy but mostly works) */

    display: -ms-flexbox; /* 过渡语法 IE 10 */

    display: -webkit-flex; /* 新语法 Chrome */

    display: flex; /* 新语法, Spec - Opera 12.1, Firefox 20+ */

    }

    复制代码

    小结

    主要介绍了 Flex 布局的语法,Flex 布局是当下流行的布局方式,相对于传统的布局来说,Flex 布局更灵活,易懂,能解决很多复杂场景。但是它也有缺点,由于历史原因,W3C 对该属性值做了多次修订,导致了多种写法,再加上是后起之秀,所以浏览器的兼容性没有传统布局的好,但是没关系,这些都在慢慢完善,任何事物的发展都是推陈出新的。在这一节中,你需要掌握:

    Flex 布局中容器、项目,主轴、交叉轴及它们的开始位置,结束位置的含义;

    容器的六个属性及它们属性值的含义和用法;

    项目的六个属性及它们属性值的含义和用法;

    Flex 布局在不同版本浏览器中的兼容性问题。

    展开全文
  • 垂直居中 设置position:relative和margin-top为负数 设置div的transform:translateY(-50%) 设置父元素display:flex,align-...二栏布局 float+margin-left实现: position:absolute+margin-left实现: float+...
  • 水平垂直居中的问题 (四种方法)方法一 :position布局,position设为absolute 给定高度,通过绝对定位方式居中 width: x;height: y;position: absolute; left: 50%;top: 50%;margin-left: -(x/2);margin-top: -...
  • 元素居中的种方式: 方法一:父相自绝后,子分部向左向上移动本身宽度和高度的一半(也可以用 transform:translate(-50%,-50%))最常用方法 #box{ width: 400px; height: 400px; background: red; position...
  • 三栏布局 题目:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为 300px,中间自适应。 五种方式: float布局:优点: 比较简单,兼容性也比较好。只要清除浮动做的好,是没有什么问题的;缺点:浮动元素是...
  • css垂直水平居中(三栏布局合集)

    万次阅读 2020-05-31 17:58:24
    记录下,因为入职早的原因在公司面过别人,总结下前端面试的问题吧,供大家以后面试做参考(我自己出的相对使用框架,基础多一些,也添加下别人) css 三栏布局问题(左右固定宽度 中间自适应) loat + margin(浮动...
  • CSS中间自适应,左右两定宽 实现方法有很多种 1:浮动布局(左右浮动,中间不浮动) .container .left { float: left; width: 200px; background-color: orange; } .contai...
  • 两边固定,中间自适应 圣杯和双飞翼都是先加载中间部分, 圣杯直观,需要定位 ...1,圣杯布局 <style> .container{ padding-left: 200px; padding-right: 100px; } .con{ float: left...
  • 栏布局 先写一下样式 <div class="box"> <div class="left">左</div> <div class="right">右</div> </div> 使用float + margin方式实现 <style> div { height:...
  • 垂直水平居中实例 Html代码 <div id="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div&...
  • 这篇文章给大家介绍的内容是关于css实现三栏布局的三种方式(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。浮动布局分为三个div,另外一个父级包含这三个div,使用float,注意点:三个...
  • 三栏布局就是左中右,左右两边固定,中间自适应。1. 绝对定位左边中间右边body {padding: ;margin: ;}/* 绝对定位 */.left, .right {position: absolute;top: ;}.left {background: red;width: 200px;left: ;}....
  • HTML+CSS的两栏、三栏布局以及垂直居中的实现方式。因为个人所学有限所以可能不会罗列出所有的实现方法。1.两栏布局(左固定,右适应)先写出初始样式和结构。Lorem ipsum dolor sit ametLorem ipsum dolor sit ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,629
精华内容 2,251
关键字:

flex垂直三栏布局