flexbox | 易学教程

flex 布局

阅读更多关于 flex 布局

FlexiableBox即是弹性盒，用来进行弹性布局，一般跟rem（ rem伸缩布局（转））连起来用比较方便，flexbox负责处理页面布局，然后rem处理一些flex顾及不到的地方（rem伸缩布局主要处理尺寸的适配问题），布局还是要传统布局的。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍Flex布局的语法。以下内容主要参考了下面两篇文章： A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties 。一、Flex布局是什么？ Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{display:flex;} 行内元素也可以使用Flex布局。 .box{display:inline-flex;} Webkit内核的浏览器，必须加上-webkit前缀。

Prevent flex box item shrinking after wrap

阅读更多关于 Prevent flex box item shrinking after wrap

问题 For the HTML <section class="flex-container"> <div class="item"></div> <div class="item"></div> </section> I have defined the following css .flex-container { display: flex; flex-wrap: wrap; min-height: 100vh; .item { background-color: #6f42c1; flex: 3; } .item:nth-child(2) { background-color: #0c5460; flex: 5; } @media (max-width: 768px) { .item:first-child { flex-basis: 100%; } .item:nth-child(2) { flex-shrink: 0; } } } When the viewport is greater than 768px I get the desired behaviour, i.e

Select element grows differently than input in display flex

阅读更多关于 Select element grows differently than input in display flex

问题 I'm getting an unexpected behavior in my setup. The inputs grow horizontally as expected but on the row with a select control, the growth seems to be distorted. I suspected some style to be different but a close inspection led me nowhere. Googling gave nothing and I can't find anything about implicit margin nor padding for selects. What is this about and how do I kill it? div.full-page { margin: 20px; padding: 20px; background: ghostwhite; } div.input-section { border: 3px none darkorchid;

Other ways to justify-content: space-between?

阅读更多关于 Other ways to justify-content: space-between?

问题 I am attempting to refactor some CSS in the following classes: .cards-list { flex-direction: row; align-items: flex-start; justify-content: space-between; } .cards-list .card-item { margin-bottom: 15px; flex-basis: 49%; padding: 30px 45px; } .cards-list .card-item-small { flex-basis: 25%; } My task is to only justify-content the .card-items WITHOUT creating new CSS classes. As you can see, card-items and card-item-smalls exist in cards-lists and the justify-content property applies only to

Other ways to justify-content: space-between?

阅读更多关于 Other ways to justify-content: space-between?

Other ways to justify-content: space-between?

阅读更多关于 Other ways to justify-content: space-between?

Why don't flex items shrink past content size?

阅读更多关于 Why don't flex items shrink past content size?

问题 I have 4 flexbox columns and everything works fine, but when I add some text to a column and set it to a big font size, it is making the column wider than it should be due to the flex property. I tried to use word-break: break-word and it helped, but still when I resize the column to a very small width, letters in the text are broken into multiple lines (one letter per line), and yet the column does not get smaller width than one letter size. Watch this video (at the start, the first column

Why don't flex items shrink past content size?

阅读更多关于 Why don't flex items shrink past content size?

Align 3 unequal blocks left, center and right

阅读更多关于 Align 3 unequal blocks left, center and right

问题 I'm trying to align a top menu which consists of 3 blocks of content. What I'm trying to achieve is this: block 1: left aligned block 2: centered horizontally block 3: right aligned If all 3 blocks were the same size, I could use flexbox (as in the snippet), but they're not, so it doesn't produce the output I require. Instead, flexbox puts equal space between the 3 blocks - resulting in the middle block being aligned off-center. I was wondering if this could be achieved with flexbox, or if

CSS Grid to have minimum number of columns possible with auto flow after wrapping

阅读更多关于 CSS Grid to have minimum number of columns possible with auto flow after wrapping

问题 Is it possible to have a CSS grid with auto flow that minimises the number of columns after wrapping? How? I have a grid with 6 items with auto-placement. Once not all 6 of them fit in one row, I'd like to have 3 columns and 2 rows, instead of 5 columns and 1 row, with only one element on the second one. I'd like to avoid media queries, if possible. A visual representation of what I'd like to do: 1) If all 6 items fit in one row, show them in one row. | OOO OOO OOO OOO OOO OOO | | O1O O2O O3O