flexbox

问题 I have three divs inside a parent div that are being spaced out using: display: flex; justify-content: space-between; However, the parent div has an :after on it which is making the three divs not go out to the edge of parent div. Is there a way to have flexbox ignore the :before and :after ? codepen.io .container { width: 100%; display: flex; justify-content: space-between; padding-top: 50px; background: gray; } .container div { background: red; height: 245px; width: 300px; } .container

问题 I am attempting to build an interface that uses Vue-Material to render user-inputted cards in a grid. the cards render properly. However, I want my grid to flex, justify, and stagger the different-sized cards in a way that removes gaps, as seen below: The following code corresponds with the above grid: <template> <div class="content"> <div class="md-layout"> <div v-for="post in posts.slice().reverse()" :key="post.id" class="md-layout-item md-size-20 md-xsmall-size-100" > <md-card> <md-card

问题 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 16 days ago . I would like to design a website as the picturr shows my idea. I would like to organize my page with flexbox but I don’t know how I can do it... 回答1: Use grid for that, something like that will get you the desired layout - .container { display: grid; grid-template-columns: 1fr 1fr

问题 I have a 3x3 grid with flex-box concept, inside of each cell it has another 3x3 grid. I was trying to put an Overlay over the Inner grid in one cell, but I didn't find how to do it. I found some examples like this one Overlay / hover a div in flexbox container div but it don't work in nested flex-box, or I don't know how to set them up. here is the html, the grid has just two cell to take up less space, it actually is done with JQuery but for the example lets use only 2. .Region{ position:

问题 I'm looking to arrange an intranet page in a CSS Responsive manner. I'm trying to use @media breakpoints to rearrange four basic elements (nested in two divs) in the following manner: @media only screen and (min-width: 1100px) / Desktop Mode / @media only screen and (max-width: 1099px) / Mobile Devices / I have gotten as far as I have using this code, which includes JQuery to add some gadgets into the individual Divs: <script type="text/javascript"> var adhcal = '<iframe src="..."</iframe>'

问题 This question already has answers here : Equal height children of flex items (2 answers) Closed 2 years ago . It's no problem to give one element the same height inside flexbox items but I can't get it work with more than one item. Fiddle: https://jsfiddle.net/no9jkj7m You see that for the first 2 items it works as it should: the h2 titles have the same height. But this doesn't work anymore if the content below the headings has variable height like in the last 2 items. The headings for the

问题 I'm having an issue with flex in IE. My text doesn't appear to be centering correctly. It works fine on all other browsers, however on IE it seems to break its container. I've tried playing around with min height and width, but I'm still having trouble. Any help would be really appreciated, thanks in advance. JS FIDDLE * { margin: 0px; padding: 0px; } .menu_container { position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; } .box { height

问题 I'm pretty shocked after confirming that font size is affected somehow while using flexbox on Safari iOS iOS Desktop Code a { font-size: 14px; } a + a { margin-left: 1em; } .flex { display: flex; } .float > a { float: left; } .float:after { content: ""; display: block; clear: both; } <div> <a href="#">hola</a> <a href="#">adios</a> <a href="#">hola</a> <a href="#">adios</a> <a href="#">hola</a> <a href="#">adios</a> <a href="#">hola</a> <a href="#">adios</a> </div> <div class="flex"> <a href=

问题 This is only an issue in Safari and looks like a Safari bug to me. Here is a fiddle with a simplified version of the issue. When an image is in a nested flexbox element with a width set and height: auto it is being stretched... the auto height is not working. Does something extra need to be added for this to work in Safari? .container { display: flex; flex-direction: column; } .container section:first-child { display: flex; margin-bottom: 25px; } .container img { width: 125px; height: auto; }

问题 This question already has answers here : Targeting flex items on the last or specific row (3 answers) Closed 2 years ago . I'm trying to get a group of div's (with initial widths) to stretch across a container, expanding their widths when needed. This works great using display:flex, however if it wraps onto a new line, I don't want the items on the new line to stretch if there is any remaining space. I want the new line items to keep the same widths as the other elements in the container. For