flexbox

问题 I'm having a problem with some functionality of flexboxes in Chrome. I wanted to make block with Picture and Description in it, so I decided to use flexboxex. I have flexbox parent, which has two child divs in it. First child take 30% of width, and latter is 70%. The problem is that Chrome 48 doesn't keep the image ratio and stretches its height. How it looks like Chrome 48: Flexbox display in Chrome 48 But everything is OK in Chrome 39 and Mozilla. How can I workaround this problem, or did I

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 3 years ago . I have a second-line menu that I'd like to center using flexbox. I'm new to flexbox and have a few questions: When I validate the HTML in DreamWeaver CS6 it doesn't recognize the elements top_row, left_button and right_button. Yet I followed a few examples for flexbox that show

问题 I have a regular unordered list of items with display: flex and justify-content: space-between applied to it (as a result, .first_item touches the left edge of .list and .last_item touches the right edge of .list ): <ul class='list'> <li class='first_item'>Item</li> <li class='middle_item'>Item</li> <li class='last_item'>Item</li> </ul> However, if I shrink the items using transform: scale(0.5) , there is now a space at these two locations, as if justify-content: space-between was "unaware"

问题 I am working on my project now, so I decided to use flexbox instead of float . It works fine for me, but I've found that display:flex doesn't work on the old iphone (ios 6.1). So I've added display: -webkit-box; Flex property works now, but all items are arranged in a row. I've created a simple fiddle, to show the problem. Also I've made two screenshots, to show how it works on PC and on iPhone. PC: iPhone: As you see -webkit-flex-wrap: wrap doesn't work. Does anybody know how to solve this

问题 I´m currently trying to create yome kind of layout with fixed header and footer and an dynamic content area, which should use the remaining vertical space. The content-wrapper has a content container which can contain a lot of data, so a scrollbar can appear. But now to the problem: as you can see, the main wrapper which simulates the page height, should stop at 200px height, but is being stretched by the content container. I don´t want to use a max-height at the content-wrapper and also can

问题 I am currently learning Flexbox Layout and I can not find a solution to my problem. I tried with justify-content and flex-basis but it does not work. Does anyone have the solution ? The result I would like : section { display: flex; margin: 0 auto; justify-content: space-between; } .column { width: 100%; background-color: #e2e2e2; padding: 1%; margin: 1%; flex-grow: 1; flex-shrink: 1; flex-basis: 0; } #first { flex-grow: 2; flex-shrink: 2; flex-basis: 0; } <section> <div class="column" id=

问题 The order is a useful property in flex. I search this on the internet. Summary The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code. <View style={{display:'flex'}}> { item.cover ? <Image style={[styles.item, styles.newsItem]} source={{uri:item.cover}}/> : null } { item.title ? <Text

问题 I ran into an issue using drag and drop module from the Angular CDK. I use it inside a container div which has (among others) the following CSS properties : display: flex; flex-wrap: wrap; The flex_wrap property is here so that if the contained draggable elements don't fit in the container, they wrap into a second line and so on. As the dragging is horizontal ( cdkDropListOrientation="horizontal" ), this works fine when all elements fit in a single line, but as soon as they wrap to a second

问题 This question already has answers here : When flexbox items wrap in column mode, container does not grow its width (4 answers) Closed 2 years ago . Goodday fellow developers, I would like to create a container that allows content to go from top to bottom and left to right. The parent container needs to stretch to fit but within maximum defined values. I have used flexbox for this purpose, however I do not get the parent container to stretch to fit. Does anyone have any suggestions, without

问题 I have these two different layouts illustrated in the code below. My issue is that I can't replicate these layouts without changing the markup. I was wondering if there was some fancy flexbox way I can accomplish exactly this while only using one html scheme. Note: the container will need to have a dynamic height. The solution doesn't necessarily have to use flexbox as long as the desired layout is achieved. main { width: 750px; max-width: 100%; margin: auto; border: solid 1px black; display: