在使用flex布局方式让最后一个元素居右（最右边）显示，一层 HTML 结构实现左“右”布局，使用flex实现居中对齐

我们在布局的时候通常会在导航栏上有居左和居右显示，中间留白，这样页面伸缩的时候不会影响效果。形如下图

以往我们可能更多会使用float浮动布局来实现这种效果，但是flex得到广泛支持以后就可以更方便和快捷的实现这种效果了：

代码如下：

    <div class="wrap"><div class="item">标题1</div><div class="item">标题2</div><div class="item">标题3</div><div class="item">标题4 &nbsp; 标题5</div></div><style>.wrap {width: 600px;height: 42px;background-color: green;color: #fff;display: flex;align-items: center;}.item {padding: 0 10px;}.item:last-child {margin-left: auto;margin-right: 20px;}</style>

上面的最后（标题4，标题5）是在最后一个item中然后居右显示，当然也可以把这两个元素放到a标签或者span标签中再放入item中效果一样（可以把最后看似好几个元素居右显示）。关键代码：父元素wrap中需要声明：display:flex。然后最后一个元素即.item：last-child{margin-left:auto;}即可。

flex 布局中，如果想让内容超出显示...（ellipsis）不成功，需要改为display:block。如果想在flex中这样显示... 可以给元素加上 min-width:0就可以了

使用flex实现居中对齐

方式一

利用margin:auto;属性值还可以极方便的设置我们常用的上下左右居中，效果如下：

代码如下：

    <div class="wrap"><div class="item"></div></div><style>.wrap {width: 400px;height: 200px;border: 1px solid #c00;display: flex;}.item {width: 100px;height: 100px;background-color: #ccc;margin: auto;}</style>

如果你曾经用过把容器的左右外边距都设置为 auto 以让页面布局显示在视口中间的方法的话，你肯定知道自动外边距能够消化掉全部的多余空间。当把两侧的外边距都设置为 auto 时，块元素就会被挤到中间，多余的空间则被留到两侧。

关键代码：父元素的display：flex;要据中的元素：margin:auto;

方式二

flex中还有一种方式可以实现同样的效果，代码如下：

    <div class="wrap"><div class="item"></div></div><style>.wrap {width: 400px;height: 200px;border: 1px solid #c00;display: flex;justify-content: center;align-items: center;}.item {width: 100px;height: 100px;background-color: #ccc;}</style>

关键代码：父元素wrap上同时设置：display:flex;justify-content:center;align-items:center;利用align-items:center;还可以实现文字上下居中显示。

使用grid布局实现相同效果代码类似使用flex。

上面提到了flex实现上下左右居中对齐的方式，利用这种方式我们会发现我们可以不用在意要居中的元素的大小，可以让其随内容自增长也能让其居中显示。同样的效果（不用在意居中元素大小）还可以利用transform以及绝对定位来实现：

    <div class="wrap"><div class="item">123123123</div></div><style>.wrap {width: 400px;height: 200px;border: 1px solid #c00;position: relative;}.item {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}</style>

关键代码：父元素relative,子元素绝对定位，并且left:50%;top:50%;transform:translate(-50%,-50%)；

最后提一下常用的使用绝对定位，但是需要有宽度和高度值，并设置：margin-left:-width/2;margin-top:-height/2；即可居中。

在使用flex布局方式让最后一个元素居右（最右边）显示，一层 HTML 结构实现左“右”布局，使用flex实现居中对齐相关推荐

flex实现最后一个元素居右
使用flex实现最后一个元素居右的步骤: 父级元素使用flex布局子级元素使用margin-left: auto;实现元素居右显示代码示例: 让class属性值为two的元素居右显示 < ...
编写程序，生成一种贯穿10*10字符数组（初始时全为字符'.'）的“随机步法”。程序必须随机地从一个元素“走到”另一个元素，每次都向上、向下、向左或向右移动一个元素位置
编写程序,生成一种贯穿10*10字符数组(初始时全为字符'.')的"随机步法".程序必须随机地从一个元素"走到"另一个元素,每次都向上.向下.向左或向右移动一个 ...
flex布局，最后的一个元素布满剩余空间
设置父元素flex布局时,第一个元素宽度固定,第二个元素布满剩余空间以下是react-native中的代码 .father{display: 'flex',flexDirection: " ...
CSS的三种布局方式
前言所谓布局,就是指定把一个盒子放在合适的位置称为"布局" 流式布局(最简单,盒子的默认布局) 百分比布局,通过盒子的宽度(百分比)来根据屏幕的宽带来进行收缩,不受固定像素的限制 ...
2.18 前端页面布局方式的演变
第一阶段现在已经很少有人提及,其实最早的页面布局是使用table布局的,那时候的网页设计师基本不会担心跑位的问题,但是随着网页的功能越来越复杂,CSS的表现力越来越强,对HTML文档的语义化要求和页 ...
移动端有哪些常见布局方式？
大家好,我是IT修真院深圳分院第九期的学员徐炜,一枚正直.纯洁.善良的前端程序员. 今天给大家分享一下,修真院官网css任务13,深度思考中的知识点--移动端有哪些常见布局方式? 1.背景介绍随着智 ...
android中的5个布局方式
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
【Android开发学习笔记之一】5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
Android开发的之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

在使用flex布局方式让最后一个元素居右（最右边）显示，一层 HTML 结构实现左“右”布局，使用flex实现居中对齐

方式一

方式二

在使用flex布局方式让最后一个元素居右（最右边）显示，一层 HTML 结构实现左“右”布局，使用flex实现居中对齐相关推荐

最新文章

热门文章