精华内容
下载资源
问答
  • HTML弹性布局

    2019-12-17 11:29:08
    DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 父元素 */ .father{ border: 1px solid green; display: flex;/...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			/* 父元素 */
    			.father{
    				border: 1px solid green;
    				display: flex;/* 让父元素修改弹性布局 */
    				/* 默认子元素水平排列 */
    				/* 修改默认行为:子元素垂直排列 */
    				flex-direction: column;
    			}
    			/* 子元素 */
    			.son{
    				width: 100px;
    				height: 100px;
    				background: aqua;
    				border: 1px solid #0000FF;
    			}
    		</style>
    	</head>
    	<body>
    		<h3>移动应用最常使用布局方式 flex</h3>
    		<h3>(默认)子元素水平排列</h3>
    		<h3>子元素垂直排列</h3>
    		<div class="father">
    			<div class="son"></div>
    			<div class="son"></div>
    			<div class="son"></div>
    		</div>
    	</body>
    </html>
    

     垂直排列

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			.father{
    				width: 300px;
    				height: 300px;
    				border: 1px solid firebrick;
    				display: flex;
    				/* 子元素水平居中 垂直居中 */
    				justify-content: center;/* 水平居中 */
    				align-items: center;/* 垂直居中 */
    			}
    			.son{
    				width: 100px;
    				height: 100px;
    				background: #008000;
    			}
    		</style>
    	</head>
    	<body>
    		<h3>flex布局 --子元素在父元素中居中</h3>
    		<div class="father">
    			<div class="son"></div>
    		</div>
    	</body>
    </html>
    

    垂直居中水平居中

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{margin: 0;padding: 0;}
    			.wrap{
    				width: 750px;
    				height: 1000px;
    				margin: 0 auto;
    				border: 1px solid crimson;
    			}
    			.nav{
    				display: flex;
    				flex-wrap: wrap;/* 换行 */
    			}
    			.item{
    				width: 20%;/* 子元素宽度 */
    				height: 200px;
    				border: 1px solid blue;
    				box-sizing: border-box;/* 重新计算宽度 */
    			}
    		</style>
    	</head>
    	<body>
    		<h3>flex-商品列表 三行 五列</h3>
    		<div class="wrap">
    			<div class="nav">
    				<div class="item">商品1</div>
    				<div class="item">商品2</div>
    				<div class="item">商品3</div>
    				<div class="item">商品4</div>
    				<div class="item">商品5</div>
    				<div class="item">商品6</div>
    				<div class="item">商品7</div>
    				<div class="item">商品8</div>
    				<div class="item">商品9</div>
    				<div class="item">商品10</div>
    			</div>
    		</div>
    	</body>
    </html>
    

    弹性布局

     

     

    <!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>
            .container{
                border: 1px solid #000;
                width: 500px;
                height: 500px;
                margin-left: 20px;
                margin-top: 20px;
                /* display: inline-flex; */
                display: flex;/* 以块级元素存在,占用一行 */
                flex-direction: row;/* 元素顺序显示位置操作 */
                /* justify-content: center;垂直位置对齐方式 */
                /* align-items: center;水平位置对齐方式 */
                /* 换行操作 */
                flex-wrap: wrap;
                /* 垂直对齐方式 */
                align-content: flex-start;
            }
    
            .item{
                width: 100px;
                height: 100px;
                color: #fff;
                font-size: 50px;
                text-align: center;
                line-height: 100px;
            }
    
            .item:nth-of-type(1){
                background-color: #ff0000;
                align-self: stretch;
                /* order: 1; */
                flex-grow: 1;
            }
            .item:nth-of-type(2){
                background-color: #00ff00;
                align-self: stretch;
                /* order: 1; */
                flex-grow: 1;
            } 
            .item:nth-of-type(3){
                background-color: #0400ff;
                align-self: stretch;
                /* order: 0;item顺序数值越小排在前面 */
                flex-grow: 1;
            }
            .item:nth-of-type(4){
                background-color: #00b7ff;
            }
            .item:nth-of-type(5){
                background-color: #fbff00;
            } 
            .item:nth-of-type(6){
                background-color: #ff00f2;
            }
            .item:nth-of-type(7){
                background-color: #9900ff;
            }
        </style>
    </head>
    <body>
        <!-- div>div.item*3 -->
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
        </div>
    </body>
    </html>

     

     

    展开全文
  • HTMl弹性布局

    千次阅读 2019-03-12 20:40:32
    开发工具与关键技术:弹性布局 作者:li 弹性布局 一直以来,我们前端开发的布局方案是基于盒模型,但现在移动端的网页如果按pc端的来写,pc端的布局就不适应了,Flex布局意思是弹性布局,它可以让我们更灵活。需要...

    开发工具与关键技术:弹性布局
    作者:li

    弹性布局
    一直以来,我们前端开发的布局方案是基于盒模型,但现在移动端的网页如果按pc端的来写,pc端的布局就不适应了,Flex布局意思是弹性布局,它可以让我们更灵活。需要注意的是设为Flex后,子元素的float,clear和vertical-align属性会失败。
    采用flex布局的元素,称为Flex容器。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

    下面我用一个简单的示例说下弹性布局,html如下
    在这里插入图片描述

    Css部分的相关属性: 相关属性来自学习资料

    display;flex; 就可以设置弹性布局。其属性特点如下;
    flex-direction: column;/*主轴为垂直方向,起点在上沿
    flex-direction: column-reverse;/主轴为垂直方向,起点在下沿。
    flex-direction: row;/
    (默认值):主轴为水平方向,起点在左端。
    flex-direction: row-reverse;/*主轴为水平方向,起点在右端。

    flex-wrap属性:默认情况下,项目都排在一条线(又称"轴线")上。
    flex-wrap属性定义,如果一条轴线排不下,如何换行*/
    flex-wrap: nowrap;/nowrap(默认):不换行。
    flex-wrap: wrap;/wrap:换行,第一行在上方。
    flex-wrap: wrap-reverse;/
    :wrap-reverse 换行,第一行在下方。
    /

    flex-flow:性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
    flex-flow: row nowrap;/默认值/

    justify-content属性*/
    justify-content属性定义了项目在主轴上的对齐方式。
    以下对其方式:前提是flex-direction 值为 row 即主轴线 从左到右
    justify-content: flex-start;/*flex-start(默认值):左对齐
    justify-content: flex-end;/*flex-end:右对齐
    在这里插入图片描述

    效果如下图,普通的盒模型设置下的盒子,若页面被压缩会使格子自行换行
    在这里插入图片描述

    在使用弹性布局后,如果可视页面被压缩后,的效果如下;
    在网页窗口被拉伸的时候,弹性布局不会像传统的盒模型那样,压缩后会自动换行,而是在窗口变小后依旧保持原布局
    在这里插入图片描述

    展开全文
  • 弹性布局使用方式 兼容性:适合使用手机端;pc 直接放弃(原因,项目需要兼容所有浏览器 ie10 以上考虑) 粥店:微信,微信小程序,各个小程序,优先弹性布局 使用规则: 1:找到父容器,给父容器display:flex 2:...

    弹性布局使用方式

    兼容性:适合使用手机端;pc 直接放弃(原因,项目需要兼容所有浏览器 ie10 以上考虑)
    粥店:微信,微信小程序,各个小程序,优先弹性布局

    使用规则:
    1:找到父容器,给父容器display:flex
    2:一旦容器变成flex布局,主轴 与 交叉轴 就会存在 (你用或者不用它都在那里)
    3:确定主轴方向:flex-direction 默认水平方向 从左往右—>决定 子元素水平方向排列
    4:在主轴上怎么排列—>justify-content 决定 左对齐 右对齐 居中 元素之间距离相等对齐。。。
    5:看纵向布局是否有规律?
    有:—> align-item 元素在竖直方向对齐方式 上对齐 下对齐 居中对齐 ,文字基线对齐
    没有:但是有布局—> margin padding position

    注意:

    1:一般子元素在父容器中不会内容溢出(只会变小)

    总结:页面布局思路

    页面是由html构成的,熟悉html本身默认特点【很重要】
    布局重要:尽量通过结构,利用流式布局

    如何构建结构

    1:只要看到从上往下的布局;就在这几个子元素外部加一个【父容器】
    —>原理: 子元素在父容器中 从上往下;并且可以撑起父容器的高度

    2:只要看到从左往右的布局方式
    —>原理: 子元素一定变成inline元素; inline inline-block
    3:将元素变为 inline inline-block 方式?
    - 显示转化: display:inline || inline-block
    - 隐式转化: 给子元素添加 position float 给父容器添加display:flex
    4:确定元素特点后:
    - 左右对齐方式有规律;首选 float
    - 所有子元素从左往右; 间距相同;排列有规律;公司要求不兼容ie10以下 —>flex布局
    - 特殊情况 position:absolute;
    -只要看到在屏幕上固定不变;只能使用position:fixed

    展开全文
  • html弹性布局

    2019-01-04 13:38:08
    display(显示方式): ... (4)flex:弹性 flex-driection(排序方式): (1)row:横向布局 (2)row-reverse:反转横向布局 (3)column:纵向布局 (4)column-reverse:反转纵向布局 justify-content(主轴线对齐方式...

    display(显示方式):

    		(1)none:不显示
    		(2)inline:行级
    		(3)block:块级
    		(4)flex:弹性
    

    flex-driection(排序方式):

    		(1)row:横向布局
    		(2)row-reverse:反转横向布局
    		(3)column:纵向布局
    		(4)column-reverse:反转纵向布局
    

    justify-content(主轴线对齐方式):

    		(1)flex-start:靠行头
    		(2)flex-end:靠行尾
    		(3)center:居中
    		(4)space-around:环绕对齐
    		(5)space-between:靠边对齐
    

    align-items(侧轴对齐方式):

    		(1)strectch:伸展
    		(2)flex-start:靠上
    		(3)flex-end:靠底部
    		(4)center:居中
    		(5)baseline:基线对齐
    

    flex-wrap(换行方式):

    		(1)nowarp:不换行
    		(2)warp:换行
    		(3)warp-reverse:反向换行
    

    align-content(多轴线对齐方式):

    		(1)streatch:伸展
    		(2)flex-start:靠行头
    		(3)flex-end:靠行尾
    		(4)center:居中
    		(5)space-around:环绕对齐
    		(6)space-between:靠两边对齐
    
    展开全文
  • 弹性布局:display:flex; block;inline-block;inline;none; 弹性容器:在元素上设置了display:flex;的属性即为弹性容器。弹性容器里面的子元素就会按照弹性布局的方式进行布局。 弹性子元素:弹性容器里面的直接子...
  • 一,弹性布局 弹性布局,又称“Flex布局”,是W3C在2009年提出的方案。 主要解决某个元素中内部子元素的布局方式,为布局提供的非常大的灵活性和操控性。 任何一个容器都可以指定为flex布局,包括行内布局。如果是...
  • HTML中的弹性布局

    2020-11-18 17:11:52
    弹性布局说明 弹性布局,又称“flex布局”,是由W3C老大哥于2009年瑞出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持,我们可以放心大胆的使用。 弹性布局的基本...
  • HTML弹性布局用法

    千次阅读 2020-03-01 16:09:48
    HTMl中的弹性布局的实际用法 弹性布局html中十分方便的一个布局,它可以让结构中的内容自适应不同的分辨率,简化了许多繁琐的代码,今天就简单来介绍一下弹性布局的用法。 弹性布局: display:flex;顾名思义,就是...
  • HTML5弹性布局

    2020-01-04 17:49:20
    DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt...
  • 弹性布局HTML文档中的另外一种布局方式,弹性布局一般是给一个父级盒子设置弹性布局,父级盒子本身依然在HTML的流式布局中。弹性布局为页面的编写提供了更加简洁,更加方便的布局方式,但是弹性布局不兼容8.0版本...
  • HTML弹性布局、特效

    千次阅读 2018-05-16 13:47:41
    启用弹性布局。flex-direction: column||row;flex-direction flex容器中项目的方向,row横向 column纵向flex-wrap wrap换行 nowrap不换行不会缩紧内容 如果宽度变小时,缩紧内容flex-flow 上面两个的缩写 ...
  • 弹性布局换行

    2021-06-08 19:45:22
    这个为弹性容器,里面的子元素会按照弹性布局的方式进行布局. 弹性子元素:设置了display:flex;的弹性容器的直接子元素即为弹性子元素 弹性主轴方向: 默认主轴方向为从左到右flex-direction: row; ...
  • html5 弹性布局

    2017-12-26 08:51:00
    html5 弹性布局 一、移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1、width=device-width; 设置Viewport视口宽度等于设备宽度2、initial-scale=1; 网页默认缩放比为1(网页在手持设备上,不会...
  • 弹性布局自适应宽度

    2021-04-26 10:13:35
    Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } ...
  • HTML+CSS flex弹性布局

    千次阅读 2020-10-19 22:28:27
    flex是flexible box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。 当我们为父盒子设置为flex布局后,子元素的float,clear,和vertical-align属性将失效 伸缩...
  • HTML5 弹性布局

    千次阅读 多人点赞 2021-01-14 16:26:08
    弹性布局      弹性布局相关属性      flex-direction相关属性      flex-wrap相关属性      justify-...
  • 弹性布局的名称概念: 1、容器:需要添加弹性布局的父元素;项目:弹性布局容器中的每一个子元素,称为项目。 2、主轴:在弹性布局中,我们会通过属性规定水平/垂直方向(flex-direction)为主轴;与主轴垂直的另一...
  • 利用弹性布局和less制作网页,利用弹性布局和less制作网页,利用弹性布局和less制作网页,试错前行,越努力越幸运,希望可以和大家一起进步,如有不足,多多包涵!
  • 纯css3 弹性布局瀑布流
  • 九宫格弹性布局写法

    2020-05-31 18:13:36
    DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>...
  • 弹性布局之图片居中 <div> <img src=".."/> </div> css div{ width: heigth: display:flex; justify-content:center; align-items:center;
  • 固定布局也叫静态布局 特征 给页面元素设置固定的宽度,高度,单位一般采用px等绝对长度单位 一般设置了min-width,当窗口缩小时,会出现滚动条 针对不同分辨率的设备,分别写入不同的样式文件。 优点 固定...
  • html弹性布局

    千次阅读 2019-01-14 16:12:09
    相信大家在做html页面布局的时候都有过一个很脑袋疼的问题,那就是尺寸不平均,尺寸不平均会导致页面的不整齐,今天给大家分析下弹性布局弹性布局html布局中是很广泛的一个属性,他可以让你整个页面的布局合理化...
  • 弹性布局之骰子

    千次阅读 2018-05-12 19:31:00
    不啰嗦 上效果全部使用弹性布局,实现骰子上的点进行排列思路:骰子1:父元素设置display:flex,设置参数justify-content:center;align-items:center;实现黑点的水平、垂直居中骰子2:第一个点本身就在左上角,...
  • 弹性布局可以理解为将盒子分为若干块,通过css对弹性布局的几个属性的控制,将盒中盒移动到合适位置。这是七娃对弹性布局flex的初步认知! flex的属性:fle...
  • 三栏布局:初学css的时候,什么是三栏布局?...弹性布局(移动端使用弹性布局真是非常方便,可以自己了解一下)来实现: <!DOCTYPE html> <html lang="en"> <head> <met...
  • html5中的弹性布局(移动端及其重要) 弹性盒子模型是什么? 容器属性 提示 博主:章飞_906285288 博课地址:http://blog.csdn.net/qq_29924041 弹性盒子模型是什么?布局的传统解决方案是基于盒子模型来的,主要依赖...
  • css flex 弹性布局详解

    2020-12-30 03:39:47
    案例基础布局 html <li class=item></li> <li class=item></li> <li class=item></li> <li class=item></li> css .box{ display: -webkit-flex; display: flex; } .item{ width: 200px;
  • DOCTYPE HTML&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;amp;gt; &amp;amp;lt...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,306
精华内容 10,522
关键字:

html弹性布局