flexbox

问题 I have a flex item that has three divs inside of it. ┌────────────────────────────────────────┐ | WRAPPER | | ┌─────────┬───────────┬──────────┐ | | | LEFT | CENTER | RIGHT | | | | | | | | | └─────────┴───────────┴──────────┘ | └────────────────────────────────────────┘ And I want to move the center column to the next line in small screens (less than 600px). It should occupy the 100% of the width of the screen. The problem I have is that when the center column comes to the next line, the

问题 This question already has answers here : What are the differences between flex-basis and width? (3 answers) Closed last month . I have a flexbox inside of an absolutely positioned parent div . I expect the flexbox to have a computed width , causing the parent div to expand, but this doesn't happen. The parent div has some width, but it is not wide enough to accommodate the flexbox. Given that the flexbox has four children, each with flex-basis: 100px , and flex-shrink: 0 , I'd expect the

问题 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-md-3"> <div class="card bg-dark text-white"> <img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image"> <div class="card-img-overlay"> <h5 class="card-title">Title</h5> <h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3> <div class="align-self-end">Text I want at bottom</div> </div> </div> </div> I am unable to

问题 I have a div and I have 12 items aligned at center using flex. But I just want to have 4 items in row, so I want 3 rows of 4 columns. This is ok to do with flex? And do you know how to do? I'm trying to do that like this: https://jsfiddle.net/18mzsqcx/1/, but it's not working. Or it's better to just create a div for example .col4 with width equal to 25% and some margins and put this class .col4 in each item? *, *:after, *:before { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing

问题 I have a div and I have 12 items aligned at center using flex. But I just want to have 4 items in row, so I want 3 rows of 4 columns. This is ok to do with flex? And do you know how to do? I'm trying to do that like this: https://jsfiddle.net/18mzsqcx/1/, but it's not working. Or it's better to just create a div for example .col4 with width equal to 25% and some margins and put this class .col4 in each item? *, *:after, *:before { margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing

问题 This question already has answers here : Make container shrink-to-fit child elements as they wrap (4 answers) CSS when inline-block elements line-break, parent wrapper does not fit new width (2 answers) Closed 6 days ago . A simplified plunkr to show the problem: https://plnkr.co/edit/mHTHLEumQ04tInFVAz3z?p=preview If you resize the right viewport until the two containers no longer fit on the same row, right one moves to a new line. However the parent inline-flex container width does not

问题 I'm trying to make a layout of 2 divs of full width and 2 divs of half width (the last 2 divs should be in one line). The HTML is like the following: <div class="container"> <div class="box--full">1</div> <div class="box--full">2</div> <div class="box--half">3</div> <div class="box--half">4</div> </div> The CSS: * { box-sizing: border-box; } .container { display: flex; width: 200px; flex-flow: row wrap; } [class*="box--"] { display: flex; margin: .25rem; height: 2rem; padding: .25rem; color:

问题 Building off of a previous question, I'm trying to add bigger blocks to my grid layout. In the last question, I needed to have a div span multiple rows. The problem now is that I need a div to span multiple rows and columns . If I have a five-element row , how could I put bigger elements in the middle of it? (as float puts it naturally on the side). Here's an example snippet: #wrapper{ width: 516px; } .block{ display: inline-block; width: 90px; height: 50px; margin: 5px; background-color: red

问题 This question already has answers here : Left column and stacked right column using flexbox CSS [duplicate] (2 answers) Closed 2 years ago . I have 3 div containers and I want first div container to be on left side and be as large in height as 2 containers on the right side, but the problem is that the containers on right side are not wrapped in one parent container. Basically what I want to do - Is it even possible to do it without changing html structure? Or only possible solution would be

问题 I have a simple flexbox layout like this html,body { margin:0; padding:0; } body { height:100%; width:100%; } .panel-grid { -webkit-align-items: flex-start; align-items: flex-start; margin-bottom:30px; display:flex; justify-content:space-between; } #section-163 { width:calc(61.8034% - ( 0.38196600790794 * 30px ) ); align-self:auto; } #section-260 { width:calc(38.1966% - ( 0.61803399209206 * 30px ) ); align-self:auto; } .myimage { object-fit:cover; width:100%; height:100%; } <div class="panel