flex布局，没有justify-self,如何实现一左一中布局

自从接触到flex布局后，就觉得用的特别爽，后来发现flex布局的justify-self好像不起作用，不像 align-self 属性那样可以单独对子元素自己设置是左对齐还是右对齐和居中对齐；
现在直接上代码：

<style>* {margin: 0;padding: 0;}.header {display: flex;width: 900px;height: 120px;margin: 0 auto;background: paleturquoise;}.back {display: flex;align-items: center;justify-content: center;width: 200px;/*这个宽度是你左边元素的宽度*/font-size: 20px;}.title {display: flex;justify-content: center;align-items: center;flex: 1;background-color: wheat;}</style>
</head><body><div class="header"><div class="back">返回</div><div class="title">中间标题</div><div class="back"></div></div>
</body>

显示效果：

其实就是给右边加了一个空的div，如果大家有啥更好的方法可以评论区留言！

flex布局，没有justify-self,如何实现一左一中布局相关推荐

flex 左右布局_web前端学习：移动端开发常用布局—前端弹性布局总结
各位已经入坑的前端小伙伴,前面咱们已经给大家分享了移动端开发时候流式布局的应用场景及注意事项,今天再次给大家分享一个布局叫弹性布局,接下来咱们从如下几个方面,全方位的给大家介绍弹性布局的使用. 一:什 ...
flex布局实现叠在另一个div之上_flex布局
在学习flex布局之前,我们是如何让如下四个盒子排在一列呢?我们也许会用浮动.定位等等.当我们使用的时候我们会觉得很麻烦,需要调间距.量距离等.然而学习了felx布局,我们可以轻松的解决这些问题. 1 ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...
bootstrap 垂直居中布局_给你一份详细的CSS布局指南，请查收
作者:catboy 文章来源:http://t.cn/A6wtKzip 在我们前端开发过程中,写css(包括sass, less, stylus这样的预处理器)进行设计稿的样式还原是一项重要的工作,而 ...
【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局, flex 盒子布局.float 浮动布局.position 定位布局,grid 网格布局,还有针对于移动端的 ...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
Vue大屏实战二：页面三分实现左中右布局
文章目录 1.最终效果 2.左中右布局 3.页面样式 4.页面逻辑 1.最终效果页面整体效果 2.左中右布局 <div><div cla ...
html图片排列布局下面字_CSS 实现：图片+文字的布局（综合）
☊[实现要求]:图片+文字+居中 √[实现]: ① img + 文字标题1111 普通布局 .demo2-1 { // 文字可用demo1中的方案一布局; line-height: $px; tex ...
计算机网页设计布局与排版研究,论计算机网页设计的布局与排版
王禹智摘要:网页设计是一种直观的视觉语言,需要对其进行布局与排版.虽然网页设计与平而设计之间存在一定的区别,但是其两者依然存在一定的相似之处,网页设计应该充分借鉴利用平而设计的原则与方法.网页设计 ...

flex布局，没有justify-self,如何实现一左一中布局

flex布局，没有justify-self,如何实现一左一中布局相关推荐

最新文章

热门文章