HTML中用弹性布局设置位置,HTML的flex弹性布局

flex 布局概述

1. flex 是什么flex 是 Flexible Box 的缩写,意为弹性布局

flex 2009 年就已出现,浏览器兼容性很好,请放心使用

2. flex 解决了什么问题块元素的垂直居中, flex 可以轻松解决

元素大小在容器中的自动伸缩,以适应容器的变化,特别适合移动端布局

3. flex 项目的布局方向是什么一个物体在一个平面中, 要么水平排列, 要么垂直排列, flex 借鉴了这个思想

flex 是一维布局, 项目任何时候只能沿一个方向排列,要么水平, 要么垂直

flex 项目排列的方向, 称为主轴, 水平和垂直二种

与主轴垂直的称为交叉轴(有的教程也称之为副轴/侧轴)

4. flex 布局中常用术语有哪些(三个二)序号

简记

术语

二成员

容器和项目(container / item)

二根轴

主轴与交叉轴(main-axis / cross-axis)

二根线

起始线与结束线(flex-start / flex-end)

flex弹性布局

/* 容器 */

.container{

width:300px;

height:150px;

}

/* 将容器/父元素设置为flex容器,布局只针对子元素、对孙子元素无效 */

.container{

display:flex;

/* inline-flex是针对多个容器的布局 */

display:inline-flex;

}

/* 项目/子元素 */

.item{

width:100px;

height:50px;

background-color:aqua;

font-size:2rem;

}

HTML中用弹性布局设置位置,HTML的flex弹性布局相关推荐

float布局设置同一行行高一样_布局思想：大事化小、先行后列、见缝插针
display属性 block: 块级元素 inline: 行级(内联)元素 inline-block: 行内块元素,既在同一行内呈现,也能设置width,height none: 隐藏元素 floa ...
Word 2016高级知识精通【一】页面布局设置、大纲级别设置、目录设置
目录用一张图展示该博客的知识体系 1.页面布局设置 2.大纲级别设置 3.目录设置用一张图展示该博客的知识体系 word2016高级知识精通 1.页面布局设置问:什么是页面布局? 答 ...
移动WEB开发之flex伸缩布局
学习目标能够说出flex盒子的布局原理能够使用flex布局的常用属性能够独立完成携程移动端首页案例 1. flex布局体验 1.1 传统布局与flex布局传统布局兼容性好布局繁琐局限性, ...
css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型元素分类常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
html设置弹性盒子分配自适应比例,移动端弹性布局flex，CSS3自适应
1.Flex布局今天整理了一些关于Flex布局,参考了好多大神的杰做php Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.css 任 ...
flex 下对齐_CSS3中Flex弹性布局该如何灵活运用？
前言 Flex(Flexible Box),意为"弹性布局"."弹性",顾名思义,就是具有弹簧的特性啦,能够自由的伸缩(有点自适应的意思啦). 其实Flex并不 ...
display：flex弹性布局
一.背景前段时间帮公司运维小姑娘调整她自己写的页面样式时发现她用了display: flex,我这个后端老古董还不太懂flex,自愧不如啊,所以写篇博客记录学习下. 现在写的前端页面还停留在依赖 d ...
Flex 弹性布局(****************************************************)
多行自适应,多列自适应,间隔也能自适应,任意对齐创建弹性容器 flex container display: block | inline | inline-block | none | fl ...
Flex弹性盒子（一篇带你掌握潮流 Flex 布局）
文章目录 Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 1.2.Flex布局出现后 2.什么是Flex布局? 3.Flex container/item(父/子容器)的常用属性 4.L ...

HTML中用弹性布局设置位置,HTML的flex弹性布局

HTML中用弹性布局设置位置,HTML的flex弹性布局相关推荐

最新文章

热门文章