精华内容
下载资源
问答
  • flex的基本内容 解释: 1.红色是主要知识点,橘色是细节内容,图片是样例 2.具体内容在代码里面哟 ...Flex布局</title> <script src="js/vue.js" type="text/javascript" charset="utf-8">

    flex的基本内容

    解释:

    1.红色是主要知识点,橘色是细节内容,图片是样例

    2.具体内容在代码里面哟

    后面有简单的总结^*^~~*

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>Flex布局</title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<style>
    			#row,#center,#items,#column,#align-content
    			{
    				display:flex;
    				width:150px;
    				height:150px;
    				background:blanchedalmond;
    				flex-direction:row-reverse;
    				border:0.9px skyblue solid;
    				margin: 0 auto;
    			}
    			#center
    			{
    				justify-content:center;
    				flex-wrap:wrap;
    			}
    			#column
    			{
    				background:orange;
    				flex-direction:column;
    			}
    			#items
    			{
    				flex-direction:row;
    				align-items:center;
    			}
    			#align-content
    			{
    				flex-direction:row;
    				flex-wrap:wrap;
    				align-content:space-between;
    			}
    			span span,#center span,#align-content span,#align-self span
    			{
    				width:40px;
    				height:40px;
    				background:blueviolet;
    				/*文字居中对齐*/
    				text-align:center;
    				line-height:40px;
    				color:white;
    			}
    			#items span
    			{
    				width:40px;
    				background:blueviolet;
    				text-align:center;
    				
    			}
    			#matter
    			{
    				color:orange;
    			}
    			#mmatter	
    			{
    				color:red;
    			}
    			#font
    			{
    				display:block;
    				text-align:center;
    				font-size:7px;
    			}
    			#flex,#align-self
    			{
    				display:flex;
    				width:150px;
    				height:150px;
    				background:blanchedalmond;
    				border:0.9px skyblue solid;
    				margin: 0 auto;
    			}
    			#flex  span:nth-child(1)
    			{
    				display:flex;
    				width:40px;
    				height:40px;
    				background:orange;
    			}
    			#flex span:nth-child(3)
    			{
    				display:flex;
    				width:40px;
    				height:40px;
    				background:orange;
    			}
    			#flex span:nth-child(2)
    			{
    				display:flex;
    				flex:1;
    				background:blueviolet;
    				
    			}
    			#align-self
    			{
    				
    				
    				justify-content:space-around;
    				align-items:center;
    			}
    			#align-self span:nth-child(1)
    			{
    				align-self:flex-end;
    			}
    			#align-self span:nth-child(4)
    			{
    				order:1;
    			}
    			#align-self span:nth-child(4)
    			{
    				align-self:flex-end;
    			}
    			
    			
    		</style>
    	</head>
    	<body>
    		
    		<div>
    			<ul>	
    				<li id='mmatter'>flex是父元素的属性,通过父亲属性控制孩子的排列方式(一个父亲只有一个排列方式)-display:flex;,且默认是按主轴排列
    				</li>
    				<li>
    					<p id='matter'>排列方式有:flex-direct:row/row.reverse/column/column.reverse</p>
    				</li>
    				<li>
    					<p id='matter'>row/row.reverses是主轴横向排列(从左向右排列)/row的水平翻转从右向左排列,同理纵向排列,,,</p>
    				</li>
    			</ul>
    		</div>
    		
    <!--flex-direction:row.reverse-->		
    		<div id='font'>row-reverse:主轴为横向从右至左排列</div>
    		<span id="row">
    			
    				<span>
    					1
    				</span>
    				<span>
    					2
    				</span>
    				<span>
    					3
    				</span>
    				
    		</span>
    		
    <!--flex-direction:column-->		
    		<div id="font">column:主轴为竖向默认从上往下</div>
    		<span id="column">
    			<span>4</span>
    			<span>5</span>
    			<span>6</span>
    		</span>
    		<ul>
    			<li id='mmatter'>
    				<p >首先要确定主轴的排列方式,通过justify-content设置对齐方式</p>
    			</li>
    			<li >
    				<p id='matter'>通过:justify-content:center(居中对齐)/flex-start(左对齐)/flex-end(右对齐/下对齐)/space-around(均匀分布)/space-bettwen(先帖两边,后均匀分布) 来设置对齐方式</p>
    			</li>
    			<li id='mmatter'>
    				<p >按主轴排列,当元素所需区域大于父元素时不会主动换行,通过flex-wrap设置换行</p>
    			</li>
    			<li id='matter'>
    				<p>默认的是:nowrap-主动调节宽度/高度使子元素适应父元素(不换行)通过::flex-wrap:wrap;</p>
    			</li>
    		</ul>
    		
    <!--justify-content/flex-wrap-->	
    		<div id='font'>子元素居中对齐且换行</div>
    		<div id='center'>
    			
    			<span>c1</span>
    			<span>c2</span>
    			<span>c3</span>
    			<span>c4</span>
    			<span>c5</span>
    		</div>
    		
    		
    <!--align-items侧轴对齐设置-->
    <ul>
    			<li id="mmatter">
    				<p>由于justify-center是依据主轴对齐的,所以想要侧轴也要对齐则也需要:align-items</p>
    			</li>
    			<li>
    				<p id="matter">通过:align-items:flex-start,flex-end,center,stretch(拉伸:子元素的高度和父元素一样,所以不设置子元素高度)</p>
    			</li>
    		</ul>
    		<p id="font">垂直居中对齐(侧轴(align-items)主轴(justify-content)都为center)</p>
    		<span>
    		
    		<div id="items">
    			<span></span>
    			<span></span>
    			<span></span>
    		</div>
    		</span>
    <!--align-content对于多行的侧轴对齐设置-->
    		<ul>
    			<li id="mmatter">以上是针对单行内容,要想设置多行内容的排列(设置测轴)需要align-content</li>
    			<li id="matter">align-content:flex-start,flex-end,center,stretch,space-around(均匀分布),space-between(先贴两边,后均匀分布)</li>
    			
    		</ul>
    		<p id="font" >多行文本先贴边后均匀分布</p>
    		<div id='align-content'>
    			<span></span>
    			<span></span>
    			<span></span>
    			<span></span>
    			<span></span>
    			<span></span>
    		</div>
    <!--flex解决分布问题-->
    <p id="font" >实现贴边分布后中间再分布</p>
    <ul>
    	<li id="mmatter">
    		flex:<number>是用来分配剩余空间的,默认为0(不显示),所以当剩余空间的分配给一个的对象时,无论flex值(>=1)为多少都占满所有剩余空间
    	</li>
    	<li>
    	<p id="matter">有多个对象参与分配,则平均后按比例分配eg.A:flex:1   A:flex:2   则A占剩余空间的1/3,B占2/3</p>
    	</li>
    	<li>
    		<p id="matter">#/./标签...:nth-child(number)可为对应子元素设置样式</p>
    	</li>
    </ul>
    <p id="font">设置不均分配(一个固定高宽,剩余的按比例分配)</p>
    		<div id='flex'>
    			<span></span>
    			<span></span>
    			<span></span>
    		</div>
    <!--align-self,order解决特殊问题-->
    <ul>
    	<li id="mmatter">align-self是针对某个子元素,且他会覆盖align-items的值</li>
    	<li id="mmatter">order是移动元素位置,默认为0,值为n则移动n位(+右移,-左移),其余元素依次挪动(不是元素替换,只是移动)</li>
    	
    </ul>
    		<p id="font">改变第一个和最后一个元素的位置,并交换我/她</p>
    		<div id='align-self'>
    			<span></span>
    			<span></span>
    			<span></span>
    			<span></span>
    			<span></span>
    			
    		</div>
    		<ul>
    			<li>单个标签的内容居中:</li>
    		</ul>
    		<ol id="mmatter">
    			
    			<li>block块积元素:要设置width为具体值才可以用margin:0 auto;使其居中</li>
    			<li>block块积元素:直接text-align:center也可使其居中</li>
    			<li>block块积元素可以自动换行,但不可调节高度,inline行积元素是连续的,知道占满一行才换行,所以不能调节高度</li>
    			<li>害,鹅也只会这点的皮毛了,其他高端的我也不造了ya~~^<^</li>
    		</ol>
    		
    		<p id="font">总结:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
    		<ol>oder和align-self是用于子元素的,其余都是父元素的属性</ol>
    		<ol>
    			<li>justify-content:主轴分布</li>
    			<li>align-items:侧轴分布</li>
    			<li>align-content:对于多行的侧轴分布</li>
    			c<li>flex-flow:同时设置flex-direction flex-wrwp</li>
    			<li>align-self/order:个别元素特殊位置的设置</li>
    			
    		</ol>
    		<p style="color:pink;text-align:center;">短短一行字,是小可爱一天的青春~~^*^~~</p>
    	</body>
    </html>
    
    

    在这里插入图片描述

    以上就是代码里写的知识点,鹅觉得基本够用了伐~***

    知识点来源于看了视频哔哩哔哩-黑马程序员

    展开全文
  • flex布局垂直居中

    2021-05-21 15:37:39
    使用flex布局实现下面图中效果: 外框高都为400px,边框为2px;圆的宽高为100px;中圆是水平居中;下圆是水平居中以及相对于中圆垂直居中(下圆到中圆的距离和下圆到下边框的距离相等)。效果如图: 我的实现方法是...

    使用flex布局实现下面图中效果:

    外框高都为400px,边框为2px;圆的宽高为100px;中圆是水平居中;下圆是水平居中以及相对于中圆垂直居中(下圆到中圆的距离和下圆到下边框的距离相等)。效果如图:
    在这里插入图片描述
    我的实现方法是笨办法,大佬们多指点

    <div class="box">
            <div class="item">
                <div class="child">
                </div>
            </div>
        </div>
    
    .box{
        width: 400px;
        height: 400px;
        border: olive solid 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .item{
        width: 100px;
        height: 100px;
        background-color: rgba(255, 0, 0, 0.6);
        border-radius: 100%;
    }
    .child{
        width: 100px;
        height: 100px;
        background-color: rgba(255, 0, 0, 0.6);
        border-radius: 100%;
        margin-top: 125px;
    }
    
    展开全文
  • display: flex; align-items: center; justify-content: center; flex-direction: column; flex-wrap: wrap;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-wrap: wrap;
    

    展开全文
  • flex布局实现垂直居中 上下两端对齐

    千次阅读 2020-08-28 17:21:44
    很多项目都会有这种页面 左面图片 右边是文字 之前我一般的做法就是用flex分为左右两部分 ,然后右边的的文字直接用边距把文字分开,但是有时候适配的话有的机型可能会有问题,然后我就查了一下flex有没有垂直居中的...

     

    很多项目都会有这种页面 左面图片 右边是文字 之前我一般的做法就是用flex分为左右两部分 ,然后右边的的文字直接用边距把文字分开,但是有时候适配的话有的机型可能会有问题,然后我就查了一下flex有没有垂直居中的方法,然后发现了 flex-flow这个属性,再也不用担心机型问题了

    display:flex;
    flex-flow: column; //垂直排列
    justify-content: space-between;//两端对齐

    展开全文
  • 常用的几种布局方式---Flex 布局(垂直居中展示)前言一、默认使用静态布局二、flex布局1.父元素container1.1.display:flex1.2.flex-direction属性1.3.主轴与侧轴1.4.justify-content属性1.5.align-items属性1.6.flex...
  • 在实际工作的过程中经常遇到图片文字的混排,需要图片与一段文字垂直居中,这个实现方法以前一直非常复杂,而flex是解决这个问题比较好的办法; css代码 display:flex; flex的是Flexible的缩写,意为弹性。可以...
  • 2、浮动导致的水平不对齐flex布局 3、不使用浮动时如何左右排布: flex布局的justify-content:space-between; 4、隐藏显示需要占位的情况:opacity:0 中间留言内容部分 代码 <li v-for="(item,index) in ...
  • .m-design-header-action{display: flex;padding: 0 18px 0 0; align-items: center; width: 180px;gap: 8px;text-align: right;justify-content: flex-end;}
  • flex布局 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀。 .box{ display: -webkit-flex; /* ...
  • 一、Flex布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 块级元素flex布局: #box{ display: flex; } 行内元素flex布局: #box{ display: inline-flex; } ...
  • flex布局中如何让子元素水平垂直居中 思路: 先让子元素在主轴上居中对齐:justify-content: center; 再让子元素在侧轴上居中对齐:align-items: center;(单行) 或者 align-content: center;(多行) 注意:不要...
  • flex布局水平垂直居中

    2020-03-01 18:34:33
    flex布局中要想实现元素水平垂直居中,需要用到justify-content和align-items这两个属性,下面先详细介绍一下这两个属性 justify-content:决定了主轴方向上子项的对齐和分布方式 flex-start : 子项都去起始位置...
  • body{ display: flex; display: -webkit-flex;...flex-direction: row columncolumn-reverserow-reverse /*调节布局元素的方向*/ flex-wrap:nowrapwrapwrap-reverse/*换行属性*/ justify-content:/*水平居中*/...
  • flex实现居中对齐

    千次阅读 2020-07-20 15:56:36
    之前我们是这样来实现上下居中对齐的: .center-layout {| position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%); } 而flex这样来实现: .center-layout {| ...
  • 更多关于flex布局可以参考这篇博文:https://blog.csdn.net/qq_34803821/article/details/85139315 使用flex实现元素的水平居中垂直居非常方便 水平居中: .box{ display: flex; justify-content: center; } ...
  • flex布局实现元素的垂直居中

    千次阅读 2019-07-19 09:51:52
    转载:[转载自这里](https://blog.csdn.net/amberqu/article/details/79700974) 转 Flex实现元素的水平居中和垂直居中 ...
  • Flex布局-垂直居中并换行显示内容

    千次阅读 2020-12-07 16:44:09
    flex属性 .flex{ display: flex; align-items: center; justify-content: center;... flex-direction: column;... flex-wrap: wrap;... flex-start, //起点/顶部对齐flex-end, //终点/底部对齐; center, /
  • 实现内容垂直居中 <div class="flex"> <div> <p>公司名称</p> <p>2021.9.15</p> </div> </div> .flex{ /*flex 布局*/ display: flex; /*实现垂直居中*/ ...
  • 利用flex实现元素水平垂直居中

    千次阅读 2019-07-19 13:43:39
    首先介绍一下flex布局。 采用Flex布局的元素,称为Flex容器(flex container),简称“容器”。它的所有子元素自动成为容器成员,成为flex项目(flex item),简称“项目”。 容器默认存在两根轴:水平的主轴(main...
  • .cc{ width:100%; ... display:flex; justify-content:center; align-items:center; font-size:35rpx; } <view class="cc"> <span>暂无可用优惠券</span> </view>
  • 行内元素一般是文本,图标等,text-align可以控制其相对于父元素水平居中对齐 #parent{ text-align: center; } 2 margin 自动水平居中 单个块级元素,可以使用margin auto可自动左右对齐,不过要首先设定宽度 #son...
  • 实现水平与垂直居中水平居中行内元素块级元素垂直居中单行文本的水平垂直居中多行文本的水平垂直居中块级元素水平垂直居中固定宽高的水平垂直居中不固定宽高的水平垂直居中基于Flex实现水平垂直居中橘子很甜。...
  • 当元素在主轴是 一行一列时 align-content : 设置子元素在辅轴上的对齐方式 当元素在主轴是 多行多列时 align-self : 设置 该子元素 在父盒子中的 在辅轴上的 排列方式 center:设置在侧轴方向上居中对齐 flex-start:...
  • 如上图所示,在flex布局中,无论某列存在多行可能,我们始终要保持同一行数据高度居中问题。 line-height只能解决单行问题,所以我们可以利用css3的transform属性来解决。 如果li 元素设为flex, 那么直接包裹子元素...
  • 实现最终效果 <!--index.wxml--> <view class="body"> <view class="out"> <view class='in'> <text>in</text> <... display: flex; justify-conten
  • 1:伸缩布局内部的内容实现两边对齐,上下居中。 display:flex; justify-content:space-between; align-item:center;//上下内容居中
  • 图片和文字垂直居中-flex布局

    万次阅读 2017-11-16 23:41:56
    就是一个盒子里面,图片和文字垂直居中 2.惯用套路 我之前的解决思路都是给图片设margin,给文字设line-height, 为了适配单位一般都不是px,用百分比设置,基本都是靠调试效果调出来的,非常不
  • display: flex; 子元素添加 align-self: center 示例 <div class='father'> <div class='child'></div> </div> <style> .father { background: #ff6b89; height: 600px; ...
  • CSS flex样式垂直居中

    万次阅读 2019-07-15 00:07:26
    如果要做垂直居中,就需要计算div控件的高度,如果内容变多或者变少,又会导致定位不准确,因此,最稳妥的办法就是让浏览器自己去根据div的高度居中显示 flex 个人理解 作用自身的样式 flex-direction属性决定主轴...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,803
精华内容 4,721
关键字:

flex布局垂直居中对齐