flexbox | 易学教程

shrinking flexboxes to the same height of the shortest box [duplicate]

阅读更多关于 shrinking flexboxes to the same height of the shortest box [duplicate]

问题 This question already has answers here : One flex item sets the height limit for siblings (4 answers) Closed 2 years ago . I currently have a flexbox layout that looks like this: The blue is class = "wrap", the orange and all three yellow boxes are contained in two separate class = "wrap_col", and each yellow box is contained in class = "wrap_item". .wrap { display: flex; flex-flow: row wrap; margin: 0 auto; } .wrap_col { display: flex; flex-direction: column; flex: 1 0 auto; } .wrap_item {

CSS3 flex - stretches the image instead of centering it?

阅读更多关于 CSS3 flex - stretches the image instead of centering it?

问题 Why does flex center stretch my image instead of centering it? css: .flex-centre { display: flex; justify-content: center; flex-direction: column; text-align: center; height: 100%; width: 100%; } HTML: <div style="height: 400px; width: 400px; background: #ccc"> <div class="flex-centre"> <img class="img-responsive" src="http://placekitten.com/g/200/200" alt=""> </div> </div> Result: Any ideas? jsfiddle 回答1: You have set flex-direction: column and now main axis is Y and cross axis is X. So

Make flexbox wrap rows upside-down

阅读更多关于 Make flexbox wrap rows upside-down

问题 Today I was looking at a 'Tabs' HTML gizmo that I'd built, and I noticed that since I was using inline-block to lay out the tab headers, when they wrapped, I'd get output that looked something like this: +-------+ +--------+ +--------+ +------+ +------------+ +-----+ | Apple | | Banana | | Cherry | | Date | | Elderberry | | Fig | +-------+ +----------+ | Grape | | Honeydew | --+ +-------------------------------------------------------------- No problem, I thought: I bet I can use flexbox to

How to get a flexbox not to use more space than the container?

阅读更多关于 How to get a flexbox not to use more space than the container?

问题 I am building a modal, and want it to be centred in my page and grow organically but only until it reaches a certain width and height. I center this modal ( .modal ) with flexbox, and it works fine. Inside this modal I have another flexbox ( .modal-content ), with a body ( .modal-content__body ) and a footer ( .modal-content__footer ) element. I want the body to grow until the whole .modal reaches my max-height , at which point I want the modal-content__body to start scrolling vertically. The

What is the correct property for flex-wrap in IE10?

阅读更多关于 What is the correct property for flex-wrap in IE10?

问题 I am trying to use flex-wrap , but find it is not supported in IE10. Is there any other flex property that could achieve the same result in IE10? 回答1: All flex properties that work in IE10 can be found in Microsoft documentation: Flexible box ("Flexbox") layout in Internet Explorer 10 For flex-wrap you would use -ms-flex-wrap . Another option is to paste your code in the following tool, which automatically generates all the prefixes you need. Autoprefixer 来源： https://stackoverflow.com

How to make image flex to it's width?

阅读更多关于 How to make image flex to it's width?

问题 how do I prevent my image from being stretched over it's natural 200px width? footer { display: flex; } img { flex: 1; margin: 1em; } <footer> <img src=http://www.placebacon.net/200/150> </footer> 回答1: Take the flex off of the image and set max-width to 100%. This will allow the image to grow to it's max size and shrink if it's parent shrinks. Then add align-items: flex-start to the container. This will allow the aspect ratio to remain intact if it shrinks. footer { display: flex; align-items

Flexbox: How to stretch row's elements to full width?

阅读更多关于 Flexbox: How to stretch row's elements to full width?

问题 I have a flexbox grid of random width images: I would like to stretch elements of each row to full width in order to get rid of white-space - how can I achieve that with CSS? justify-content doesn't seem to help much. I have read about some JavaScript techniques but I would like to avoid it if possible. [Edited] Expected result : example .grid { display: flex; flex-wrap: wrap; justify-content: center; } .grid .grid-item { width: auto; display: inline-block; vertical-align: bottom; float: none

Flexbox seems to be ignoring CSS specificity

阅读更多关于 Flexbox seems to be ignoring CSS specificity

问题 I am attempting to use Flex-By-Default in the same manner as Facebook's CSS layout project. I am having some trouble when it comes to overriding the styles for display: inline-flex elements. Per this jsfiddle: The HTML, with two '.test-me' divs: <body> <h1>TEST</h1> <div class="test-me"> I'm correctly displayed as inline-flex </div> <div> <div class="test-me"> 'Styles' shows inline-flex, but 'Computed' shows flex </div> </div> </body> Here is the styling: .test-me { display: inline-flex;

html5 <summary> element with some text right justified

阅读更多关于 html5 element with some text right justified

问题 I am trying to use html5's <details> and <summary> elements to present a collapsible/expandable outline-style list but can't figure out how to get the <summary> element text formatted correctly. I want the text left justified and the timestamp and block of links right justified. I tried to do this by using a flexbox for the line and doing the layout inside the flexbox. This works fine for the text in the <details> part. However, on the summary line everything I've tried results in either the

Sticky Footer，完美的绝对底部

阅读更多关于 Sticky Footer，完美的绝对底部

写在前面做过网页开发的同学想必都遇到过这样尴尬的排版问题：在主体内容不足够多或者未完全加载出来之前，就会导致出现（图一）的这种情况，原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部。但是，我们期望的效果是页脚应该一直处于页面最底部（如图二）：笔者最近在项目中也遇到过这样的场景，在寻找最佳解决方案的过程中，了解到了 “Sticky Footer” 这个名词。本文将带大家重新认识这个常见的网页效果，以及一些可行的实现方案。什么是 “Sticky Footer” 所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。总而言之，就是页脚一直处于最底，效果大致如图所示：当然，实现这种效果的方法有很多种，其中有通过脚本计算的，有通过 CSS 处理的，脚本计算的方案我们不在本文探讨。下面我们看看有哪些通过 CSS 可以实现且适用于移动端开发的方案，并分析其中的利弊。如何实现假设我们页面的 HTML 结构是这样： 1 2 3 4 < div class= "wrapper"> < div class= "content">  </ div> < div class= "footer"> <!-- 需要做到