企业网站建设飞沐,徐州app定制开发,网站做飘浮怎么做,做商标网站css flexbox模型by Kevin Kononenko凯文科诺年科(Kevin Kononenko) CSS Flexbox在全国范围内的公路旅行中得到了解释 (CSS Flexbox Explained by Road Tripping Across the Country) 如果您旅行很长#xff0c;那么您可以了解CSS Flexbox#xff01; (If you have ever been…css flexbox模型by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) CSS Flexbox在全国范围内的公路旅行中得到了解释 (CSS Flexbox Explained by Road Tripping Across the Country) 如果您旅行很长那么您可以了解CSS Flexbox (If you have ever been on a long roadtrip, then you can understand CSS Flexbox!) The popular Flexbox model attempts to replace the giant pain known as CSS “floats”. Unfortunately, it also introduces yet another entirely new system into CSS. And you thought there were enough already! 流行的Flexbox模型试图替代称为CSS“ floats ”的巨大痛苦。 不幸的是它还在CSS中引入了另一个全新的系统。 而且您认为已经足够了 Actually, the grid-oriented nature of Flexbox makes much more sense than constantly juggling your “float” and “block/inline-block” values. 实际上Flexbox面向网格的本质比不断调整“ float”和“ block / inline-block”值有意义得多。 There are already a couple good resources out there, like Flexbox Tower Defense and this more technical guide. 已经有一些不错的资源例如Flexbox塔防和此更多技术指南 。 In this article, I’ll take the route of explaining the Flexbox system through one of my favorite types of vacations… the road trip! 在本文中我将通过我最喜欢的一种度假方式-公路旅行来说明Flexbox系统 That’s right — we’re going to use the entire United States in this analogy. 没错-我们将以此类推来使用整个美国。 The US actually has a grid-oriented interstate highway system that spans East-West and North-South. 实际上美国拥有跨东西向和南北向的以网格为导向的州际公路系统。 While this map is geographically accurate, it’s pretty hard to understand. So let’s try that again. 尽管这张地图在地理上是准确的但很难理解。 因此让我们再试一次。 In this scenario, you must primarily travel along a one-directional path. 在这种情况下 您必须主要沿着单向路径行驶 。 For example, you might take the route from Seattle to Boston which only includes west to east. Or, you might take the route from Seattle to San Diego, which only covers north to south. 例如您可能选择了从西雅图到波士顿的路线其中仅包括西到东。 或者您可能会选择从西雅图到圣地亚哥的路线该路线仅覆盖北到南。 Since the default position is top left, we’ll start from Seattle. You’ll get a chance to add side trips to your road trip towards the end! This is important because it imitates the flow of divs within their container. 由于默认位置在左上方因此我们将从西雅图开始。 您将有机会在旅途中添加旁行路线 这很重要因为它模仿了div在其容器中的流动。 Let’s hit the road! 让我们上路吧 flex-direction您旅行的方向 (flex-direction: The direction of your trip) Flex-direction determines the direction of elements within a container div with “display:flex;”. The default value is “row”, which means from left to right. No surprises there. 伸缩方向使用“ displayflex;”确定容器div中元素的方向。 默认值为“行”表示从左到右。 没有惊喜。 Let’s say you’re starting in Seattle, and taking a trip to Boston. That trip might look like this in HTML: 假设您要从西雅图开始然后去波士顿旅行。 该行在HTML中可能如下所示 This assumes that you’re making stops at Yellowstone, Mount Rushmore and Chicago. Here is a timeline view, assuming you stop for 2 days at each location. 假设您要在黄石公园拉什莫尔山公园和芝加哥停留。 这是时间轴视图假设您在每个位置停留2天。 And what if you are using “flex-direction:column;”? That means that your divs will align from top to bottom. Now, you’re going from Seattle to San Diego. Stops along the way might be Portland, San Francisco and Los Angeles. 如果您使用的是“ flex-directioncolumn;”该怎么办 这意味着您的div将自上而下对齐。 现在您要从西雅图到圣地亚哥。 一路上的站点可能是波特兰旧金山和洛杉矶。 证明内容您在旅途中如何安排停留地点 (justify-content: How you space your stops along the trip) Alright, let’s return to the Seattle to Boston trip. With Flexbox, we can decide how our child divs spread out along the width of the container. So, if you are on a road trip, you may not necessarily evenly space out your stops. You might stop more frequently at the beginning, or at the end. 好了让我们回到西雅图到波士顿的旅程。 使用Flexbox我们可以决定子div沿容器的宽度分布的方式。 因此如果您在旅途中不一定会均匀地停下来。 您可能会在开始或结束时更频繁地停止。 The default value for justify-content is “flex-start”, which means your divs spread from the left-most side. This is similar to choosing to do all of your stops on the roadtrip at the beginning. This would include places like Glacier National Park, Yellowstone and Mount Rushmore. justify-content的默认值为“ flex-start ”这意味着您的div从最左侧展开。 这类似于选择一开始在旅途中的所有停留。 其中包括冰川国家公园黄石公园和拉什莫尔山。 On a map: 在地图上 Okay, this is admittedly a little unrealistic. You probably would not want to drive 20 hours from South Dakota straight to Boston. The same could be said of “flex-end”, when all of the divs hug the right side of the container. This would include stops at places like the wonderful city of Cleveland, Niagara Falls and the MLB Hall of Fame. 好的这无疑是不现实的。 您可能不希望从南达科他州开车直达波士顿20小时。 当所有div都拥抱容器的右侧时“ flex-end ”也可以这样说。 这将包括在美丽的克利夫兰市尼亚加拉大瀑布和美国职业棒球大联盟名人堂等地方停留。 On map: 在地图上 Another example is “center”, where the divs align themselves to the middle of the container div. That would mean visits to Mount Rushmore, the Mall of America in Minnesota and Chicago. 另一个示例是“ center ”其中div使其与容器div的中间对齐。 那将意味着参观拉什莫尔山明尼苏达州和芝加哥的美国购物中心。 align-items您想在全国穿哪条公路 (align-items: Which highway do you want to take across the country?) Alright, so far we have mainly been discussing the northern route across the country. In HTML terms, that means we are just going along the top of the div. But, one magical property of Flexbox is that we can easily move to the middle or bottom of the div without any CSS trickery. 好吧到目前为止我们主要讨论的是横跨美国的北部路线。 用HTML术语来说这意味着我们只是在div的顶部。 但是Flexbox的一项神奇特性是我们可以轻松地移至div的中间或底部而无需任何CSS技巧。 The align-items property defaults to “flex-start”, but if we change that to “center”, our divs will vertically align to the center of the container. This is kind of like starting your road trip in San Francisco, heading over to Las Vegas, then Denver, then St. Louis and ending in Washington D.C. align-items属性默认为“ flex-start”但是如果将其更改为“ center ”则我们的div将垂直对齐容器的中心。 这有点像在旧金山开始您的公路旅行然后前往拉斯维加斯然后是丹佛然后是圣路易斯然后在华盛顿特区结束 Here’s the map: 这是地图 And, in HTML: 并且在HTML中 If you wanted to set your align-items value to “flex-end”, your divs would align to the bottom of the container. You would be taking the southern route across the United States, and stopping in places like Sedona, Austin and New Orleans before ending in Jacksonville. 如果要将align-items值设置为“ flex-end ”则div将与容器的底部对齐。 您将沿美国南部路线行驶然后在塞多纳奥斯丁和新奥尔良等地停留然后在杰克逊维尔结束。 自我调整在另一条高速公路上停下来 (align-self: Have one stop on a different highway route) You can apply “align-self” to individual child divs in order to have them move vertically within the container, regardless of the align-items property. So if you are taking the trip from Seattle to Boston, you can make a stop in Las Vegas, which is in the middle of the country. Then you can continue on to Mount Rushmore or wherever else on the normal horizontal flow. 您可以将“ align-self”应用于单个子div以使它们在容器中垂直移动而不管align-items属性如何。 因此如果您从西雅图到波士顿旅行可以在美国中部的拉斯维加斯停留。 然后您可以继续前往拉什莫尔山(Mount Rushmore)或正常水平流动的其他任何地方。 顺序按特定顺序停靠 (order: Make your stops in a specific order) So far, every stop has corresponded with the order of the elements in the HTML. In other words, if the Mount Rushmore stop is specified third in the HTML, that means it will be the third stop on the road trip. 到目前为止每个停止都与HTML中元素的顺序相对应。 换句话说如果在HTML中将拉什莫尔山站指定为第三站则这将是旅途中的第三站。 The “order” property is a numerical value that allows us to change the order of the HTML elements. Without Flexbox, we would need to use a confusing series of floats, or just change the HTML. “ order”属性是一个数值使我们可以更改HTML元素的顺序。 如果没有Flexbox我们将需要使用一系列令人困惑的浮点数或者仅更改HTML。 With “order”, we can turn around on our road trip and visit a place that is not on the way to the end point. Would you do this in real life? Only if you enjoy an extra 15 hours in the car! 使用“订单”我们可以绕开公路旅行并前往未到达终点的地方。 您会在现实生活中这样做吗 仅在您享受额外15个小时的车程时 Let’s say we’re taking the northern trip, Seattle to Boston. Here’s that HTML again. 假设我们正在北行从西雅图到波士顿。 这又是HTML。 But, after starting in Seattle, we want to first go to South Dakota for the world’s largest square dance festival. We would use the “order” property to make sure the Mount Rushmore visit comes right after Seattle. 但是从西雅图开始之后我们想先去南达科他州参加世界上最大的广场舞蹈节。 我们将使用“ order”属性来确保拉什莫尔山的访问恰好在西雅图之后。 Order defaults to 0, so we might want to give seattleVisit a value of -2, and mountRushmoreVisit a value of -1 to make sure it comes 2nd. Then the rest of the elements will follow in a normal flow. Order默认为0因此我们可能要给seattleVisit赋予-2的值并为mountRushmoreVisit赋予-1的值以确保它排在第二位。 然后其余元素将按照正常流程进行。 Notice — this is now strictly a timeline view, not using the geographic order as the other maps were using. 注意-现在严格来说这是一个时间轴视图没有像其他地图一样使用地理顺序。 结论 (Conclusion) Time for a little quiz! Here are some sample destinations, in HTML. 时间小测验 这是HTML中的一些示例目标。 But, if the following is your planned route… what would the CSS need to look like? 但是如果以下是您计划的路线那么CSS需要什么样 Start in San Francisco 从旧金山开始 2nd stop: Las Vegas 第二站拉斯维加斯 3rd Stop: Mount Rushmore 第三站拉什莫尔山 4th Stop: Backtrack to Denver 第四站回丹佛 End by driving all the way to Washington D.C 一路驶向华盛顿特区结束 The answer: 答案 Here’s the reasoning behind this: 这是其背后的原因 4 out of 5 items are along our central route, so we “align-items” to center. 5个项目中有4个位于我们的中心路线上因此我们将“项目对齐”到中心。 The three stops are generally in the middle of the United States from a West-East perspective, so we “justify-content” to center as well. 从东西方的角度来看这三个站点通常位于美国中部因此我们也将“合理化内容”定为中心 。 Mount Rushmore is on the northern route, so we use align-self on that one div. 拉什莫尔山(Mount Rushmore)位于北部路线因此我们在该div上使用align-self 。 The order CSS property is why we must backtrack to Denver, and why our actual trip does not follow the order of the children divs in the HTML. Order allows us to change the sequence of divs. In this case, we move Denver to the second to last stop, so we must give it an order greater than 0, but less than the order of the final div so that we still end in D.C. CSS 顺序属性是为什么我们必须回溯到丹佛的原因以及为什么我们的实际旅行没有遵循HTML中子元素div的顺序。 Order允许我们更改div的顺序。 在这种情况下我们将丹佛移至倒数第二个停靠点因此我们必须给它一个大于0但小于最后一个div的顺序的顺序以便我们仍以DC结尾 If you enjoyed this post, you may also enjoy my other explanations of challenging CSS and JavaScript topics, such as positioning, Model-View-Controller, and callbacks. 如果您喜欢这篇文章那么您可能还会喜欢我对具有挑战性CSS和JavaScript主题的其他解释 例如定位Model-View-Controller和回调。 And if you think this might help other people in the same position as you, give it a “heart”! 而且如果您认为这可以帮助与您处于同一位置的其他人请给它一个“心脏” 翻译自: https://www.freecodecamp.org/news/css-flexbox-explained-by-road-tripping-across-the-country-1217b69c390e/css flexbox模型
