flexbox

问题 I'm working on my personal site. The parent header is placed in a flexbox: HTML: <header class="main"> <div class="content"> <div class="logo"> <a href="#"><img src="image.png" alt="" /></a> </div> <div class="navigation"> <nav class="main-nav"> <ul> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Sub-Menu 1</a></li> <li><a href="#">Sub-Menu 2</a></li> </ul> </li> <li><a href="#">Menu 2</a></li> </ul> </nav> </div> </div> </header> CSS: header { display: -webkit-flex; display: flex; justify

问题 How can I position 3 images like this with CSS? I've tried multiple methods such as inline-block to position my images like the image above, but all went wrong. I have also tried looking through the internet to find a tutorial on this sort of thing, but couldn't find anything that could help me. @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300); @import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic); html { height: 100%; box-sizing: border-box; }

问题 How can I position 3 images like this with CSS? I've tried multiple methods such as inline-block to position my images like the image above, but all went wrong. I have also tried looking through the internet to find a tutorial on this sort of thing, but couldn't find anything that could help me. @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:300); @import url(https://fonts.googleapis.com/css?family=Crimson+Text:400italic); html { height: 100%; box-sizing: border-box; }

问题 I just noticed some values of the align-self property that I haven't seen before. What are start , end , self-start , and self-end and what are their differences from flex-start and flex-end ? I've been referring to the guide at CSS-Tricks often when I work with flexbox, but it doesn't mention these values. I read the documentation for align-self at MDN, but the one-line description of the values isn't enough for me to understand. I thought I might be able to play around with the values to

问题 The LHS flex child in this example has 1em padding, and it will cause RHS to overflow the parent: <div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black"> <div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 33%; background-color: blue; box-sizing: border-box"> LHS </div> <div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 67%; background-color: red; box-sizing: border-box"> RHS <

问题 Closed . This question needs details or clarity. It is not currently accepting answers. Want to improve this question? Add details and clarify the problem by editing this post. Closed 2 years ago . I want to set the order id on the very left and set the rest of the two to the very right of the div. The total and view elements should have equal space between them but should be to the right. justify-content:space-between sets equal space in between them and flex-grow or shrink is not working in

问题 I am trying to show 4 boxes in a line using below html. So One row should have 4 boxes. I have total 8 boxes, there will be 2 rows with 4 columns. <div class="parent"> <div class="child box1">A Child</div> <div class="child"> <div class="box2">B Child 1</div> <div class="box3">B Child 2</div> <div class="box4">B Child 3</div> <div class="box5">B Child 4</div> <div class="box6">B Child 5</div> <div class="box7">B Child 6</div> </div> <div class="child box8">C Child</div> </div> it should be

问题 I have a component ( Container ) that contains an icon (marked with an X below), a title and a child component ( Message ) that contains a long message. I would like Container's width to wrap around the icon and the title so both are on one line as much as window's width allows for it. Message component has a button that toggles display of a long text. This text should not stretch the parent Container and it should be aligned with title's width. The message content can be broken and wrapped

问题 How is it possible to get the .child s to all have the same height. height: 100% is not working an neither is flex-grow: 1 . What is the recommended approach for this using flexbox? .parent { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 800px; } .child { width: 150px; background-color: green; border: solid 1px black; } <div class="parent"> <div class="child"> Short Text </div> <div class="child"> Long Text: Bla bla bla Bla bla bla Bla bla bla Bla

问题 This question already has answers here : Center and right align flexbox elements (7 answers) Closed 2 years ago . I want to align an item in center and other in right using flexbox like the example bellow. +-------------------------+ | | | | || | +----+ +----+| | | | | | | +-------------------------+ Here is my code on plunker (Updated with solution): http://plnkr.co/edit/kYYIOIFQaEMHgvZCKMkf?p=preview 回答1: Basically, you can't really do that with flexbox using the basic alignment options (at