弹性布局的基础讲解

弹性布局的基础讲解

弹性布局是由w3c在2009年提出的一种布局方法,目前浏览器都已经支持弹性布局(忽略IE6吧)。本文主要讲解弹性布局的基本语法并将其应用到实际网页布局中

如何应用弹性布局,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .box{
            height:20vh;
            display: flex;
        }
        .box div{
            flex: 1;
        }
        .box div:last-child{
            flex: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>Document1</div>
        <div>Document2</div>
        <div>Document3</div>
        <div>Document4</div>
        <div>Document5</div>
    </div>
</body>
</html>

运行结果如下:

容器的设置

flex有6个属性可以设置:

flex-direction:row(主轴由左向右,默认) / row-reverse(主轴由右向左) / column (主轴由上向下)/ column-reverse (主轴由下向上) 决定主轴的方向

flex-wrap:nowrap(默认,不换行) / wrap(换行) / wrap-reverse(换行,第一行在下方) 决定项目在一条轴线上排不下时的换行方式

flex-flow:是上面两个属性的简写模式 默认值:flex-flow:row nowrap。

justify-content:flex-start(默认值,左对齐) / flex-end(右对齐) / center(居中) / space-between(两端对齐,项目之间的间隔相等) /
space-around(每个项目之间的间隔相等,所以项目之间的间隔比项目与边框之间的价格大一倍); 决定项目在主轴上的对齐方式。space-between/around在自适应调节间距时很有用

align-items:flex-start(交叉轴的起点对齐) / flex-end(交叉轴的终点对齐) / center(交叉轴的中点对齐) / baseline(项目的第一行文字的基线对齐)/stretch(默认值,若项目未设置高度或设置为auto,项目将占满这整个容器的高度)。 定义项目在交叉轴上的对齐方式

align-content:flex-start(与交叉轴的起点对齐) / flex-end(与交叉轴的终点对齐) / center(与交叉轴的中点对齐) /
space-between(与交叉轴的两端对齐,轴线之间的间隔平均分布) /space-around(每跟轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍)
/ stretch(默认值,轴线占满整个交叉轴)。定义多根轴线的对齐方式,如果项目自有一根轴线,该属性不起作用

项目的属性设置

order:定义项目的排列顺序,数字越小,排列越靠前,默认为0.

flex-grow:定义项目的放大比例,默认为0,默认情况下即使有剩余空间项目也不会放大。缩放的方向为flex-direction的方向。

flex-shrink:定义项目的缩小比例,默认为1,空间不足时,该项目会缩小。其值为0表示不缩小.缩放的方向为flex-direction的方向。

flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size),浏览器根据这个属性没计算主轴是否有多余空间,默认值为 auto,即项目的本来大小。flex-basis:80px;宽度(方向为row)设置为80px;

flex:是上面三个属性的简写,默认值为 0 1 auto.有两个快捷值:auto(1 1 auto)和none(0 0 auto)

align-self:该属性允许耽搁项目与其他项目不同的对齐方式,课覆盖align-items的属性值。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则为stretch。

align-self:auto / flex-start / flex-end / center /baseline /stretch flex-basis:值为0与auto(默认)时的区别:前者没有将整个项目进行计算,而后者则是忽略内容进行算的,所以如果布局是需要的是每个项目的百分比配置,则应当将flex-basis设置为0.

如果对你有帮助就收藏一下呗!

原文地址:https://www.cnblogs.com/jlfw/p/11875396.html

时间: 2024-09-30 03:04:44

弹性布局的基础讲解的相关文章

弹性布局基础讲解与高效应用

弹性布局是由w3c在2009年提出的一种布局方法,目前浏览器都已经支持弹性布局(忽略IE6吧).本文主要讲解弹性布局的基本语法并将其应用到实际网页布局中. 怎样应用弹性布局? .box{ display:flex: } 改变盒子display的属性为flex即可将盒子变为flex容器(flex container),其所有子元素自动变为容器成员,称为flex 项目(flex item). 容器默认存在两根轴,水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置叫

响应式布局与弹性布局基础篇

响应式布局与弹性布局 一.响应式布局 1.响应式布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 2.响应式布局的实现 2

百度在PWA中阐述的弹性布局-[CSS]

原文链接 响应式布局 自从进入移动互联网时代,响应式布局这个词经常出现在 Web 设计和开发领域,它让 Web 页面在不同尺寸的设备上都具有良好的浏览体验. 开始之前 在讲解响应式布局之前,需要先了解一下基础知识,只有对它们都有一定的了解,才能在做响应式布局时选取合适的技术方案. 像素 像素这个单位很常见,指的是图像中最小的单位,一个不可再分割的点,在计算机屏幕上一般指屏幕上的一个光点.例如常见的描述中 iPhone X 的分辨率是 1125x2436,一般指的是在长和宽上像素点的个数.但是在

使用em为单位制作两列弹性布局

一.DIV布局按照定位的方法分为:浮动方法(float),坐标定位方法(position),还有就是两者相结合的方法. 二.DIV布局按照定义单位的不同可分为:固定宽度布局.流体布局.弹性布局和混合布局. 固定宽度布局是将宽度用像素单位定义,它的宽度总保持不变,也被成为“冰布局”. 它的缺点是由于宽度固定,无论浏览器窗口尺寸有多大,它的尺寸也不变,无法充分利用空间. 当浏览器窗口变小时,会出现水平滚动条.这些缺点可以用其他两种布局方法解决. 流体布局的单位是用百分比控制的,不是像素.这使流体布局

Flex弹性布局在移动设备上的应用

引文 首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想用的元素,但浮动并不适用于初学者.表面上它看起来很基础,但背后复杂的功能可以使经验丰富的开发者看着自己的屏幕不知所措.另外,浮动布局有一个缺点就是需要通过额外的元素清除浮动,或者更好一点,可以清除CSS浮动而不添加额外的标签. 这些缺点使得浮动布局不是很容易掌握,因为没有一个默认的方法可以建立起浮动与元素之间的关系,所

从零开始学_JavaScript_系列(17)——CSS&lt;4&gt;(定位、遮罩、float、弹性布局flex)

部分可能不兼容低版本浏览器(比如IE) 部分图片来自网易云课堂,侵.私信.删 (60)定位 ①position ②值: static:默认,无定位 relative:相对定位,仍在文档流之中(其他的元素不变),参照物相对于原来的位置进行定位.会压在其他的元素上面.作用是为绝对定位元素提供参照物. absolute:绝对定位,脱离文档流(后续元素会在绝对定位元素的前序元素的后面),默认宽度是内容宽度,参照物是第一个定位的祖先/根元素(根元素是html元素),如果祖先没有定位元素,那么会导致其参照物

第29章 CSS伸缩弹性布局(上)

第 29章 CSS3弹性伸缩布局[上]学习要点:1.布局简介2.旧版本 本章主要探讨 HTML5中 CSS3提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解.一.布局简介CSS3提供一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box).用来提供一个更加有效的方式实现响应式布局.但是用于这个布局方式还处于 W3C的草案阶段,并且它还分为旧版本.新版本以及混合过渡版本三种不同的编码方式.在发展中,可能还有各种改动,浏览器的兼容性还存在问题.所以,本节课

web前端入门到实战:html/css弹性布局的几大常用属性详解

弹性布局的名称概念: 1.容器:需要添加弹性布局的父元素:项目:弹性布局容器中的每一个子元素,称为项目. 2.主轴:在弹性布局中,我们会通过属性规定水平/垂直方向(flex-direction)为主轴:与主轴垂直的另一方向,称为交叉轴. 弹性布局的重要的几大基础属性: 1.flex-direction属性决定主轴的方向(即项目的排列方向). row(默认值): 主轴为水平方向,起点在左端: row-reverse: 主轴在水平方向,起点在右端 : column:主轴为垂直方向,起点在上沿. co

CSS3 网格布局(grid-layout)基础知识 - 网格模板属性(grid-template)使用说明

CSS3引入了新的网格布局(grid layout),以适应显示和设计技术的发展(尤其是移动设备优先的响应式设计). 主要目标是建立一个稳定可预料且语义正确的网页布局模式,用来替代过往表现不稳定且繁琐的table.flow以及JS脚本混合技术来实现的网页动态布局. 本文将简单而准确的介绍网格布局属性的基本概念和使用方法(摘自踏得网在线HTML5教程). 1. 概述 网格模板区域(grid-template-areas).网格模板行(grid-template-rows)和网格模板列(grid-t