flexbox

问题 I have a simple flex element with some children, something like this: .container{ display: flex; flex-wrap: wrap; } .container div.flex-box{ width: 200px; margin: 20px; padding: 20px; font-size: 40px; border: 1px solid; } <div class='container'> <div class='flex-box'>one</div> <div class='flex-box'>two</div> <div class='flex-box'>three</div> <div class='flex-box'>four</div> <div class='flex-box'>five</div> <div class='flex-box'>six</div> </div> I am using flex wrap so, when screen goes

问题 I have a flex box layout consisting of a lots of div blocks with various amount of text inside. Is there a way to keep the widths of these blocks the same regardless of the amount of text they contain? If the text doesn't fit inside its box, it's perfectly fine if it gets scrollable or just clipped. I know I can set min-width and max-width the same but I want to have bigger boxes (to some extent) if the page size permits, so this is not an option. You can resize my example and see that the

问题 I wan't to use flexbox layout with angular ui tabs (ui.bootstrap.tabs). I have this plunker: http://plnkr.co/edit/9ToL1WLwgDVT0DldMnaa I changed the ui-template thus all div's get the flexbox classes. Still the tab content div is not filling up the fully available space. Any idea? 回答1: I have found a solution. Here is an updated plunker: http://plnkr.co/edit/oswSGYApFj9sSohms0FS?p=preview The key is to override the display property of the '.tab-content>.active' class. By default it is set to

问题 Can please someone point me out how can I split out second flex item vertically and horizontally like I have in image below ? I managed to split in half one big box but I failed making it the same for second flex item. This is what I have right now -> https://jsfiddle.net/paveu/8c9Ls5s8/ Thanks, HTML <div class="desktop"> <div class="yellow">lorem</div> <div class="orange">lorem</div> <div class="purple">lorem</div> <div class="green">lorem</div> </div> CSS * { box-sizing: border-box; } main,

问题 I'm trying to make it so that the explanation and participation class are flexboxes, but side by side to each other. While below them benefits and requirements would be stacked on top of each other. I tried to use flex-direction:row; for the explanation and participation section, and then switch to flex-direction: column; for the rest, but that isn't working. I need help trying to figure out this can be done. Also,I can't change my HTML. .main { display: flex; } .benefits { flex-direction:

问题 As you probably read. My question is how can i get some gap between the columns ive tried multiple ways and also read the documentation but nothing seems to be working idk on what it is lying on, i would appreciate help and i also need to center the button inside the column which is a Link. And now i need to type some more text beacause stackoverflow does not let me post this question concerning to little text but dont worry about this and please help me, i really struggled trying to fix this

问题 I have the following layout that I'm trying to achieve with flex, but just can't seem to get it: * { box-sizing: border-box; } .box { border: 1px solid black; width: 50%; padding-top: 25%; float: left; } .box:first-child { padding-top: 50%; } .box:nth-last-child(-n+2) { width: 25%; } <div class="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> If I try to use flex-direction row, it wraps the last two boxes under the first left

问题 I am trying to display a layout below in flex . I have divs of equal width and height. I want to achieve the layout out below. By placing one item on the left and the remaining four fit on the right container and maintaining the same container height in the process . Thats the one on the left increase to fill the left height and width and the other right size of the container is shared among the four items. .trades { display: flex; flex: 1; } .trade-panel { flex: 1; } .layout-5-2 { -ms-flex

问题 I would like to have container, that satisfies following conditions: it has 2 rows and unlimited amount of columns all items inside it are one-word text elements, that have their width all items inside it are equal width, defined by the widest element (longest word) I was thinking about using a flexbox. Since all of the items have known height (because they are one line of text), I can define wrappable container like this: display: flex; flex-flow: column wrap; height: 100px; All items inside

问题 Why is 100% width not applied in this implementation (where the class uk-width-1-1 is applied to nested div of child of grid container): <div uk-grid> <!-- column 01 --> <div> <!-- this will be a row, stacked --> <div class="uk-width-1-1 mine">Row 01</div> <!-- this will be a row, stacked --> <div class="mine">Row 02</div> </div> </div> However it is applied when implementing like this (where the class uk-width-1-1 is applied to child of grid container): <div uk-grid> <!-- column 01 --> <div