文档章节

在CSS Flexbox中,为什么没有“ justify-items”和“ justify-self”属性?

 法国红酒甜
发布于 07/16 22:05
字数 1087
阅读 43
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

问题:

Consider the main axis and cross axis of a flex container: 考虑伸缩容器的主轴和横轴:

在此处输入图片说明 Source: W3C 资料来源: W3C

To align flex items along the main axis there is one property: 要沿主轴对齐弹性项目,有一个属性:

To align flex items along the cross axis there are three properties: 要沿十字轴对齐弹性项目,需要三个属性:

In the image above, the main axis is horizontal and the cross axis is vertical. 在上图中,主轴是水平的,而横轴是垂直的。 These are the default directions of a flex container. 这些是flex容器的默认方向。

However, these directions can be easily interchanged with the flex-direction property. 但是,这些方向可以很容易地与flex-direction属性互换。

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(The cross axis is always perpendicular to the main axis.) (交叉轴始终垂直于主轴。)

My point in describing how the axes' work is that there doesn't seem to be anything special about either direction. 在描述轴的工作方式时,我的观点是,任一方向似乎都没有什么特别之处。 Main axis, cross axis, they're both equal in terms of importance and flex-direction makes it easy to switch back and forth. 主轴,横轴在重要性方面均相等,并且flex-direction使其易于来回切换。

So why does the cross axis get two additional alignment properties? 那么,为什么十字轴具有两个附加的对齐属性?

Why are align-content and align-items consolidated into one property for the main axis? 为什么将align-contentalign-items合并为主轴的一个属性?

Why does the main axis not get a justify-self property? 为什么主轴没有获得“ justify-self属性?


Scenarios where these properties would be useful: 这些属性将有用的方案:

  • placing a flex item in the corner of the flex container 将flex项目放在flex容器的角落
    #box3 { align-self: flex-end; justify-self: flex-end; }

  • making a group of flex items align-right ( justify-content: flex-end ) but have the first item align left ( justify-self: flex-start ) 使一组flex项右对齐( justify-content: flex-end ),但使第一个justify-content: flex-end项向左对齐( justify-self: flex-start

    Consider a header section with a group of nav items and a logo. 考虑带有一组导航项和徽标的标题部分。 With justify-self the logo could be aligned left while the nav items stay far right, and the whole thing adjusts smoothly ("flexes") to different screen sizes. 通过justify-self ,徽标可以在左侧对齐,而导航项保持在最右侧,并且整个对象可以平滑调整(“弯曲”)以适应不同的屏幕尺寸。

  • in a row of three flex items, affix the middle item to the center of the container ( justify-content: center ) and align the adjacent items to the container edges ( justify-self: flex-start and justify-self: flex-end ). 在三个flex项目的行中,将中间项目粘贴到容器的中心( justify-content: center ),并将相邻的项目与容器边缘对齐( justify-self: flex-startjustify-self: flex-end )。

    Note that values space-around and space-between on justify-content property will not keep the middle item centered about the container if the adjacent items have different widths. 请注意,如果相邻项目的宽度不同,则justify-content属性上的space-aroundspace-between值将不会使中间项目以容器为中心。

#container { display: flex; justify-content: space-between; background-color: lightyellow; } .box { height: 50px; width: 75px; background-color: springgreen; } .box1 { width: 100px; } .box3 { width: 200px; } #center { text-align: center; margin-bottom: 5px; } #center > span { background-color: aqua; padding: 2px; }
<div id="center"> <span>TRUE CENTER</span> </div> <div id="container"> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> </div> <p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

jsFiddle version jsFiddle版本


As of this writing, there is no mention of justify-self or justify-items in the flexbox spec . 在撰写本文时,在flexbox规范中还没有提及justify-selfjustify-items

However, in the CSS Box Alignment Module , which is the W3C's unfinished proposal to establish a common set of alignment properties for use across all box models, there is this: 但是,在CSS Box Alignment Module中 ,这是W3C尚未完成的建议,用于建立一套通用的对齐属性以供所有Box模型使用,其中包括:

在此处输入图片说明 Source: W3C 资料来源: W3C

You'll notice that justify-self and justify-items are being considered... but not for flexbox . 您会注意到,考虑了justify-selfjustify-items ... 但对于flexbox却没有


I'll end by reiterating the main question: 最后,我重申主要问题:

Why are there no "justify-items" and "justify-self" properties? 为什么没有“证明项目”和“自我证明”属性?


解决方案:

参考一: https://stackoom.com/question/2Ca4p/在CSS-Flexbox中-为什么没有-justify-items-和-justify-self-属性
参考二: https://oldbug.net/q/2Ca4p/In-CSS-Flexbox-why-are-there-no-justify-items-and-justify-self-properties
粉丝 0
博文 838
码字总数 0
作品 0
成都
私信 提问
加载中
请先登录后再评论。
Netty那点事(三)Channel与Pipeline

Channel是理解和使用Netty的核心。Channel的涉及内容较多,这里我使用由浅入深的介绍方法。在这篇文章中,我们主要介绍Channel部分中Pipeline实现机制。为了避免枯燥,借用一下《盗梦空间》的...

黄亿华
2013/11/24
2W
22
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.4K
6
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
5.9K
18
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.6K
0
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3

没有更多内容

加载失败,请刷新页面

加载更多

如何在Android中以像素为单位获取屏幕尺寸 - How to get screen dimensions as pixels in Android

问题: I created some custom elements, and I want to programmatically place them to the upper right corner ( n pixels from the top edge and m pixels from the right edge). 我创建......

javail
今天
7
0
如何在不安装Microsoft Office的情况下用C#创建Excel(.XLS和.XLSX)文件?

问题: 如何在不使用运行代码的计算机上安装Excel的情况下使用C#创建Excel电子表格? 解决方案: 参考一: https://stackoom.com/question/dHZ/如何在不安装Microsoft-Office的情况下用C-创...

技术盛宴
今天
7
0
如何使用pip升级所有Python软件包? - How to upgrade all Python packages with pip?

问题: Is it possible to upgrade all Python packages at one time with pip ? 是否可以通过pip一次升级所有Python软件包? Note : that there is a feature request for this on the off......

法国红酒甜
今天
21
0
活体检测+合成图鉴别面前,人脸“照片活化”黑产攻击一秒被擒

本文作者:y****n 如今,随着人脸技术的日趋成熟,新兴娱乐文化得到了极大的推动,尤其是随着 DeepFake、FaceSwap 等人脸编辑及生成技术的发展,虚拟主播、人脸合成带给人们全新的体验,但同...

百度开发者中心
昨天
12
0
如何在SQL Server中将多行文本合并为单个文本字符串?

问题: Consider a database table holding names, with three rows: 考虑一个包含名称的数据库表,该表具有三行: PeterPaulMary Is there an easy way to turn this into a single str......

富含淀粉
今天
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部