html中justify的用法

css text a line last 属性遇到 ui 这样设计的表单文本怎么办？首先肯定会想到 text a line left 靠左， right 靠右， center 居中， 也可能会想到 justifi 两端对齐，但是即使设置了也没有出现理想的效果。 这是因为在单行文本中，文本的宽度等于容器的宽度，不存在需要拉伸对齐的空隙，因此 justifi 对单行文本没有明显的效果。相反， 多行文本的情况下，文本会被自动分布到多行中，并且相邻单词之间可以有可伸缩的空隙。因此在多行文本中使用 text line justifi 可以使每一行文本两端对齐通过拉伸空 系的方式实现。那该怎么解决呢？使用 text a line list 属性就好了，它的用法和 text a line 一样，只是 text a line list 只针对文本最后一行，在单行文本中，它既是第一排又是最后一排。好了，下课。

baby close to 别说学过，只是应说。

讲第四个属性啊，我们的加斯特富奥康特特，他表示是用于去啊设置我们这个弹性盒子啊，元素在补图上面的方向。当然这也不 完全是说是指的横轴啊，因为我们这个主轴是可以通过我们的 turison 去改变的。那么我们把主轴标个记吧，啊，标一个啊，加粗，然后呢？啊，主轴呢？啊，表示的是要么是横轴，要么是纵轴，是吧？当通过我们那个 twitter 可以去改变我们的主轴嘛， 对不对啊？当我们啊，当我们的这个负盒子一旦设定了加斯康特呢，我们内部元素的一个排练方式也会受我们的加斯达康， tent， 加斯特佛康腾腾，他的一个啊，值得一个影响，那么他有几个值？来看一下菲拉克斯大，要 是从我们啊，也就默认，这也是默认者啊，表示的是从我们开头开始排练啊，正常的开排练，比如说我们这个横轴就从第一个零开始排练，那么如果说呢，我们改变，稍微的改变一下宽度为一个啊，这个五十， 放心啊，也是什么啊，五十，是不是啊，本身就是这个五十是吧，来啊，考成二十， 二十发现什么？他是从最开始开始排列，是不是后面有空位置，我也不往外面挤，对不对？那这是表示的是什么？我的子结元素全部从我开始主轴开始的位置也主轴，你看， 若是从这个点开始的，从这里往右侧去展示，如果是主轴是纵轴，那么就是从顶部往下面依次去排练，那这个是我们的一个第一种排练方式。第二种排列式方式，是啊，从开始的他的开始会 是我们容器的一个结尾的位置，也就是说我们容器的结尾就从这里，是不是在横轴上，从我们最右侧往左侧开始排练，才从重轴上，从我们最底部往顶部开始排练。来啊，那这个呢？我们也来试一下法拉克斯，笨的 哎，那这个先讲吧，讲了我们一会再来试，好不好？然后第三个是森特，森特表示的是我们我们的这个主轴的中间开始往两侧排列啊，从中间开始往两侧排列，也就是说我的内容呢，始终在我负盒子的最中间啊，对称的去排列。 然后呢？啊，我们的 scarpen 啊，比位，比位，比特位表示是什么？在我们啊，在我们啊，当前的负盒子里面每个元素呢啊，各自的去什么呀？留空白，左右中间各自的去啊，留空白。然后呢？如果 说只有两个，只有两个元素，他会顶边对齐来啊，什么意思呢？我们现在如果说我们这个负盒子，对吧？里面呢？左边一个只有两个元素，那么他的排列方式就是这样的， 明白吧？这样的，那这是我们的一个啊，因为他我们的啊，奥的奥的表示是我们前后左右都有 比较这个啊，富裕的这个牛掰啊，比较富裕的牛掰。来试一下这个。其实我们这个空口的跟你们讲不是太好理解啊，来，我们把这些母亲复制过来，在我们的负盒子里面去试一下啊，来一个值呢，是我们来把这个所有的纸给他复制啊，对，过去 啊，做一个啊，隐藏一个，只是我们在开始位置的一个啊，展示来，而且看一下是不是跟我们默认的这个样式是一样的，默认的是一样的， 上面不可分的设定一个蓝色。好。然后呢，第二个是我们的一个啊， sn 的，也就是从结束位置开始排列，哎，放心，是不是从结束位置开始排列了，然后呢？第三个呢？是我们的生态，生态表示什么？在最中间去排练， 是不是从中间往两侧去排列？中间从中间这个角开始排列，然后让他往两侧。你说我们的子级元素不管多少他都在我们的这个负盒子的最中间在展示，那第四个就是我们的 comp， 不是，我们的元素就顶边对齐。中间呢，往我们这个，往我们这个元素的这个啊，中间去，富裕的去啊，就是叫什么啊？均匀的去留白，均匀的去留我们这个对应的这个，呃，位置啊，留我们对应的这个位置 啊，那这是我们这种熟悉，那如果说元素去掉几个来，我就留三个吧，来是不是也在我们中中一五八啊？一五六，那如果说只有一个的话，来 有一个啊，他就会居左，是不是有一个就会居左，那么这是我们的一个啊，对，然后第四个，这就是最后一个。来刷新，看一下 刷新，哎，刷新，这个时候刷新，是不是我的元素并没有顶边，而是均匀的去分配了左右的一个编剧？ 是不是均匀的去分分左右的编剧？来啊，打比说，我现在只有两个元素，哎，放心，是不是我们的左每个元素的左右的这个编剧稍微的要居，要，要什么左右的编剧都是一模一样的。然后呢，由于我只有两个元素，所以呢看上去我的两个元 中间的这个编剧是我每个元素的左边或者右边的编剧的两倍，为什么呢？因为我们现在是每个元素均匀的去分配了我的主要的空间， 明白吧？那这就是区别啊，那这就是这最后两种的区别，那么啊，也给大家顺便演练的这每一种啊，每一种这个属性最终导致的元素排列的这个方式的一个结果啊，那这是我们的一个啊，子元素在负盒子里面排列的这个啊属性。

这个系列的干货资料我已经整理成了文档，想领取的朋友直接在评论区留言，我会发给大家。 hello， 大家好，我是方格。那么今天呢，我们就来深入聊一下 flex 布局的基础，我们会在这期视频里彻底搞懂 flexbox 的 工作原理中涉及到的三大核心属性。 好，那么在这个视频里呢，我们首先会从一个经典的问题出发，就是啊，如何完美居中。然后呢，我们会搞清楚 flex 布局中最重要的两个概念，两大轴线，主轴和交叉轴。这是理解一切 flex 布局的基础啊。 然后紧接着呢，我们会逐一的拆解控制布局的三大核心属性。最后呢，我们会把这些知识组合起来，然后看一下这个经典问题的解决方案。好，我们正式开始吧， 我们先来看这个问题啊，如何让一个元素在它的容器里实现完美居中。 那么在没有 flexbox 的 时代啊，这其实是件挺让人头疼的事。大家看，我们可能需要用上这个绝对定位，然后配合上 transform 属性，或者用稍微 hack 一 点的技巧，比如说 display， table sale， 甚至呢，我们还可能要计算一些腐败，腐败编剧，那么这些方法要么就是很复杂，要么在某些场景下不够稳定。但是呢，现在有了 flax 布局，一切都变得非常直观而且简单。大家看右边，只需要，我们只需要三行代码， 首先第一步就是给赋容器设置 flex， 开启 flex 布局。然后呢，就是啊， justify content 加上 allow items 这两个设置 center 搞定，就这么简单，是不是感觉非常强大？ 那么想知道我们这三行代码为什么能实现这个效果，我们就必须要理解 flexbox 的 核心工作模型。 那么 flex 布局的模型啊，其实就建立在三个核心概念之上。首先呢，第一个是方向，也就是 flex direction 方向决定了你的项目是横着排还是竖着排啊，水平排列还是垂直排列，那么这个属性非常关键啊，因为它定义了整个布局的坐标系。 那么其次呢，就是 justify content， 一个主轴对齐属性，由 justify content 来控制，它负责管理所有项目。在主轴这个方向上是如何对齐和分布的。 那么最后呢，就是交叉轴对齐的属性啊，由这个 alignanten 来控制主轴确定了，那么与它垂直的另外一条轴就是交叉轴，这个属性就负责管理项目在交叉轴上的表现啊，听起来可能有点抽象，没关系，我们一个一个来看 好。首先呢，我们先来认识两条看不见的轴，主轴和交叉轴。那么当我们给一个容器设定了这个 display flex， 默认情况下啊，它它的那个 flex direction 呢，就是 low 啊，也就是行码。那么这时候呢，我们的主轴是什么方向呢？主轴是水平的，从左到右， 这是主轴，那么所有子项目啊，所有子项目就是这些 item 会沿着这条主轴依次排列，而与这条主轴垂直的呢，自然就是交叉轴了啊，交叉轴的方向是从上到下的， 那么如果我们把 flexion 改成一个 flexion， 也就是列啊， 那么大家看这张图右边这张图，那么主轴和交叉轴这时候就发生了一个九十度的翻转，现在呢，我们的主轴变成了垂直方向，从上到下的， 而交叉轴呢，则变成了一个啊水平的从左往右的轴。 所以大家要记住啊啊， flexdirection 这个属性。 flexdirection 这个属性，它的作用呢，就是定义主轴的方向，主轴一旦确定，交叉轴自然也就确定了，这是我们 flex 布局的基础。 好，接下来呢，我们就看一下控制主轴上项目对齐的一个属性，叫做 justifycontent， 那么 justify content 的 值呢，可以分为两大类。首先，第一类是对齐类，对齐类是决定 所有项目作为一个整体啊，所有的项目在主轴上的位置，它有这三个属性。首先 flex start 就是 啊，让它们在其对齐到起点。 flex and 呢，是啊，对齐到终点。而 santa 呢，就是让它们在主轴上居中对齐。 那么第二类就是一个分布类的属性，这些这就很有意思，它决定了当这个容器有剩余空间时，这些空间是如何被分配的啊？比如这个 space between， 它是啊，一个两端对齐，就是两端的项目会往这个容器的边缘，会贴住容器的边缘，然后剩余的空间呢，则被平均分配到项目之间。 而这个 space around 的 呢， space around 它会确保每个项目的两侧啊，它们的间距都是相等的，所以从视觉上，这个项目与项目之间的间距正好是项密项目与啊容器边缘间距的两倍， 很有意思。然后是 space evenly 啊，这个是最公平的，它让所有的间距啊，不论是项目之间，还是项目与边缘之间，都变得完全相等。 好听上去这些概念有点抽象，接下来我们就通过一个交互演示来看一下，嗯，这个 justifycontent 啊，不同值的具体效果，大家注意观察这三个色块的位置变化。首先是我们来看一下这个对其类相关的属性 啊，对其类相关属性，第一个属性 flex start 啊，默认就是 flex start 所有的项目啊，这是主轴嘛， 现在它们在我们的一个主轴内排列，那么这个所有的项目啊啊， flex start 呢，它默认都会紧靠着这个主轴的起点， 然后当我们切换到啊第二个属性 flexend， 你 看所有的项目呢，就作为一个整体移动到了主轴的终点。 然后我们再看看 center center 的 话，它就是在主轴上啊，居中对齐了，那么这三个属性啊，这三个属性就是对齐类， 他们把所有的元素，把这三个元素看成了一个组来进行定位啊，就非常的直观，对不对？ 然后我接下来我们看一下这个分布类相关的属性。首先啊， 分布类我们刚才也学了，就是啊，决定了是什么，当这个容器有剩余空间时，这些空间是如何被分配的，那么这些分布类就是解决这个问题的。我们首先来看 space between， 嗯， space between， 我 们点击之后啊，大家可以看到啊，这两端的项目， 两端的红色盒子和蓝色盒子都会立即地贴往这个容器的边缘，然后啊，把所有剩余的空间啊，去平均地分配到啊这个项目之间的间隙，这是一个 space between， 两端对齐， 然后接下来就是 space around 了啊， space around 的 话，我们注意看啊，我们注意看 space around 这个属性， 嗯，它会确保每个项目的两侧它的间距是完全相等的。那么这就导致了什么一个问题，就是啊，这个项目与项目之间的间距啊，这个间距 看起来正好是项目与容器边缘的两倍，就是这个是 x， 这个是，那这个就是二 x。 好，那么最后一个属性就是 spans evenly， 嗯，它是最公平的属性，我们点击它，我们可以看到现在所有的边距，所有的间距啊，不管是项目和项目之间也好，还是项目和边缘之间也好， 它们都变得完全相等，嗯，那么这个布局看起来就非常的规整和和谐啊。 好，那么通过这个演示呢，相信大家就能非常直观地理解啊， justify content 里面的对齐类，我们刚才说对齐类和分布类之间的一区别。 好，说，完了，主轴呢，我们再来看看交叉轴 align items， 它负责的就是啊，项目在交叉轴上的对齐， 那么它的默认值很有意思啊，默认值叫 stretch， 只要这个项目在交叉轴双方向上没有设置固定尺寸， 比如说啊，如，比如你的主轴是横向的，这个项目没有设置一个 height， 那 么它就会被自动的拉伸填满整个容器的高度。 好，那么 flex start 这个属性呢，就是让所有的项目向交叉轴的起点对齐，而 flex and 呢，就是和它相反嘛，啊，向交叉轴的中点对齐，然后 center 呢？啊，就是让这个所有项目在交叉轴上整体居中。 好，我们来点直观的演示啊，嗯，大家看，这里有这个容器里有四个柱子啊，我们默认值呢，默认值是 stretch， 嗯， stretch， 大家注意看第三个柱子，第三个柱子实际在代码中啊，我们没有给它一个固定高度，但是呢，由于这个 stretch 属性啊，由于这个 stretch 属性，它就被拉伸到和这个容器一样的高度了，那么这就是 stretch 这个属性的效果。 好，我们接下来看一下这个啊， backstart， 大家看啊，现在所有的元素啊，都向着这个交叉轴的起点，这是交叉轴，那么它们都在这个啊，交叉轴的起点方向上对齐了，是不是很神奇？ 好，然后看一下这个属性 center， 那 么 center 的 话啊， 三等的话，所有的元素啊，所有的元素都以自己的中线，中线为基准，注意看，是中线为基准，那么在交叉轴的方向上居中， 大家要注意啊，这是现在元素的啊，基准是自己的中线，然后它们现在以中线方向上垂直居中。 最后我们来看一下这个 and 属性， and 属性，大家看，所有的元素现在都啊沉到这个容器底部了，它们都都在这个交叉轴的终点，也就是容器的底部去做一个对齐操作。 好，通过刚才的演示啊，我相信大家已经理解了 justify content 和 align intents 这两个控制主轴 和交叉轴的属性。现在我们回到视频开头那个问题，如何让一个元素在容器里同时实现水平和垂直居中呢？我们来分析一下啊。首先我们默认默认 flexdirection， 就是 low 嘛，所以是现在我们的主轴是水平的， 然后交叉轴是垂直的。 好，所以我们想让这个元素啊水平居中，我们就需要在这个主轴上做文章，对吧？首先要在主轴上做文章，用这个 justify content center， 让这个元素在主轴方向上 主要方向上居中，然后想让它啊水平居中嘛，然后，呃，想让它垂直居中的话，我们就需要在这个交叉轴上做文章，用 align items center 这个属性。所以最后呢，我们也啊通过这三行代码得到了一个完全居中的元素。 好，我们来快速回顾一下今天的核心知识点。首先是 display flex， display flex 是 开启这个弹性布局的大门啊，是一个开关，它让一个普通的容器变成一个 flex 容器。 其次呢，我们啊非常重要的属性是 flex direction， 它定义了整个布局的坐标系，决定了主轴是横着还是竖着的。 然后就是 justify content 了， justify content 这个属性负责啊排列主轴上的元素，负责主轴的排兵布阵。那么最后呢，就是 align items center， align items 就 负责在交叉轴上去整理这些元素的队形。 好，只要你牢牢记住这些逻辑啊，搞清楚哪些属性属于主轴，哪些属性管交叉轴，那么绝大部分单行单列的布局问题你都能迎刃而解。 好，以上就是本期的内容，希望你对啊 flax 布局有一个更深的理解，如果你觉得这期视频还不错的话，别忘了点赞、关注、收藏，我是方格，我们下期再见，拜拜！

i'll be close to you。

这是一个小伙伴发来呆某，他说啊，为什么浏览器缩小之后，上面那个一就没有了鸡翅，用滚动条也滚不上去了，但是下边没问题， 为什么会这样呢？因为啊，他用了一个 justfi content 配合 flex 做了这么一个垂直居中的效果，所以无论什么时候他都是垂直居中的，即便是浏览器的高度小，娱乐内容高度，他也是垂直居中的， 所以就会导致会有上下两部分空间在屏幕外边，下边的没问题，但上面的那部分他就看不着了，为什么呢？我们来看这个戴帽， 这个是一个可以拖拽的容器，当把容器拖拽到屏幕下边的边缘，大家看他就会出现纵向滚动条，当我们把这个容器拖拽到右边超出屏幕边缘呢，他就会出现横向滚动条，但是 是如果我把这容器拖拽到上边，他就没有滚动条，或者左边也是一样的，所以呢，有些时候我们就会把一些容器放置到横中坐标为负数的屏幕外边，这样的话呢，就可以把它隐藏起来，然后呢再做一些动画，比如说这样向下滑出， 那再回到刚才这个例子，这种情况怎么解决呢？最好的方法肯定是当他缩小的时候呢，就不要这个垂直居中了，大概这个一就出来了，然后呢，当他放大的时候呢， 再把这垂直句中加上，但是呢，这种效果就依赖于媒体查询了，就是这个媒点之前我提到过哈， 那但是有个问题，这种使用方法在这里边啊，需要设置一个 max hate， 这个值是固定的，也就意味着页面上这个数量和高度 都只能是固定的了，所以啊，这个思路也不是特别好，我们可以换一种实现垂直居中的思路，我们不用这种方法了，我们利用妈劲凹头的方式来实现垂直居中。但是呢，这里边注意它有很多个子元素，所以我们需要借助一下尾类，我们这样发的， 然后里边的 first child 给他加一个 martin top 包头，然后桶里呢再来一个辣死的 child， 然后还是 martin 包头毛头 打开剧终了，然后再缩小打卡，这样就没有问题了。