flex布局对行内子元素的影响

一、正常使用

正常情况下，行内元素设置宽高是没有效果的，行内元素会根据其内容大小自动布局。

请看以下代码和效果

 .app {width: 100%;height: 0;background-color: #3CC51F;padding-bottom: 40%;position: relative;}.icon {width: 50px;height: 50px;border: 2px solid #F00;}

 <div class="app"><i class="icon"></i><i class="icon"></i></div>

效果如下，可见对行内设置了50px的宽高是没有效果的

二、使用flex布局后的效果

如果我们对app使用flex布局，这时候50px的宽高就失效了。

.app {width: 100%;height: 0;background-color: #3CC51F;padding-bottom: 40%;position: relative;display: flex;}

使用这种特性，有时候很有用的，比如轮播图自定义前一页和后一页的按钮，直接给这2个行业元素设置图片背景就可以了。

flex布局对行内子元素的影响相关推荐

CSS之布局（行内元素的盒模型）
行内元素的盒模型: <!DOCTYPE html> <html><head><meta charset="UTF-8"><ti ...
六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
读书笔记：微信小程序布局之行内元素和块级元素
元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制. 块级元素特点总结: 1.总是在新行上开始 2.宽度的默认为width+margin-left+margin-r ...
css块级元素拉伸,CSS布局之块级元素、块级元素和行内块元素
元素有行内元素(inline).块级元素(block)以及行内块元素(inline-block)之分,对应地它们之间的盒模型也会有不同. 1. 行内元素(inline) 通过display: inli ...
行内元素设置靠右对齐_CSS中实现行内块元素对齐
目标:行内块元素实现对齐的几种方式 eg. 我希望下列两个单词文本和后面的两个图片能实现1.中线对齐2.靠右.(图1变为图2) 图1 图2 html: Gmail images 从html可以看出是两 ...
【HTML5-小知识】块元素、行内元素和行内块元素
文章目录前言一.块元素.行内元素和行内块元素是什么? 二.块元素三.行内元素四.行内块元素总结前言 HTML常用标签掌握之后,应当进一步了解元素的三种类型,块元素,行内元素,行内块元素, ...
为什么有些内联（行内）元素可以设置宽高？
为什么有些内联(行内)元素如img.input可以设置宽高? 在说明之前我们先来了解一些定义. 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示. 宽 ...
块级元素、行内元素及行内块元素
盒子模型是CSS中的一个重要概念,在html中所有元素都可以看成一个盒子.盒子有外边距(margin).边框(border).内边距(padding)及填充内容(content)等属性.使用盒子模型可 ...
【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )
文章目录一.行内元素 1.行内元素简介 2.行内元素特点 3.代码示例二.行内块元素 1.行内块元素简介 2.行内块元素特点 3.代码示例一.行内元素 1.行内元素简介行内元素可以在一行中 ...
css怎么将块元素变成,CSS块元素、行内元素、行内块元素的转换
一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...

flex布局对行内子元素的影响

一、正常使用

二、使用flex布局后的效果

flex布局对行内子元素的影响相关推荐

最新文章

热门文章