This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed last month.
<div class="flex flex-wrap items-baseline">
<div class="h-10 basis-1/2 border bg-orange-500">hello1</div>
<div class="h-40 basis-1/2 border bg-amber-700">hello4</div>
<div class="h-20 basis-1/2 border bg-yellow-500">hello2</div>
<div class="h-30 basis-1/2 border bg-green-800">hello3</div>
</div>
problem preview image: https://i.ibb.co/SK6zPCv/image.png
code: https://play.tailwindcss.com/AI0Uo1vVsT
You can use grid to get more control of your layout. Or you can add custom css like:
.h-20{
position: relative;
top:-7.5rem;
}
To arrange elements in both rows and columns, you must use grid, because according to the definition of flex, it can only be used to arrange elements in one dimension, but by using grid, this problem can be easily solved.
example
I think that you will want to use grid as #Suhail suggested. It offers more in the way of control. But this all depends on if these divs/boxes are dynamic in nature or will all be a fixed size. Be sure to look at https://css-tricks.com/snippets/css/complete-guide-grid/ for more info. This can be configured using tailwindcss and their grid classes.
Also another great resource on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
code container_row_col
I am using bootstrap card with attribute like [container, row and col] to establish a horizontal flex container. But it doesnt work. I think the problem comes from [col] but i cant figure out what to do.enter image description here
enter code here
ok i solved my problem. The problem why i wasnt able to use my flex properties with "row" id was because after <div id"row"> i implemented another <div id"bear">. I must use the <div id"col> following <div id"row">. So what i did is to delete the <div id"bear"> and i implemented my id"bear" at the same div containing row, so <div id"row bear">.
Apparently with bootstrap we cant use a div between "row" and "col"(if we want to keep "row" as a flex) .
When I select text across multiple flex element items in Safari, the selection background becomes invisible on some parts of the text.
Here are some screenshots of the difference between Firefox and Safari:
Safari
Firefox
And here's a simple code sandbox to reproduce:Link
Did anyone encounter this problem before?
This is a documented Webkit/Safari bug affecting display: flex and display: grid.
As of this writing, the text selection bug appears to affect the first block-level leaf descendent of certain direct children of the flex or grid container, depending on certain layout properties (see Layout Fiddles below).
It's worth noting that no valid values of the user-select property will have any effect on the above-described bug, nor will use of the ::selection pseudo-element. It's also worth noting that table / display: table, inline-block, float, and columns layouts do not appear to be affected by this bug, so those could be viable alternatives for certain use cases. However, since flex and grid are arguably the most powerful tools for building layouts nowadays, here are a couple of workarounds that will still allow you to use those implementations:
Approach 1: Empty Block Element
Since the above-described bug causes the first block-level leaf of the second flex item in the OP's example to be un-selectable, this workaround simply adds an empty block element (in this case a div, but any element with a display value of block will work) above <p>invisible</p> which fixes the problem:
<div style={{ display: "flex" }}>
<div style={{ marginRight: 12 }}>
<p>blue</p>
<p>blue</p>
</div>
<div>
<div />
<p>invisible</p>
<p>blue</p>
</div>
</div>
Updated code sandbox showing Approach 1 in action:
https://codesandbox.io/s/flamboyant-raman-6yq7m
Approach 2: ::before Pseudo-element
This fix uses the same concept as the first, except it uses a CSS pseudo-element instead of an empty div. For simplicity, it also applies this rule to all flex items, regardless of whether or not they might be affected.
.flexContainer {
display: flex;
}
.flexItem::before {
display: block;
content: "";
}
<div class="flexContainer">
<div class="flexItem">
<p>blue</p>
<p>blue</p>
</div>
<div class="flexItem">
<p>invisible</p>
<p>blue</p>
</div>
</div>
Updated code sandbox showing Approach 2 in action:
https://codesandbox.io/s/sharp-andras-jv6x4?file=/src/styles.css
This approach is arguably more maintainable since you don't have to manage special-case child elements like you would with the first approach. One caveat is you will use up your one and only ::before pseudo-element on the flex item in case you were planning to use it for something else.
Safari-specific Fix
A compatibility fix meant for Safari that is benign in other browsers could be the ideal solution. This appears to be the case with both approaches mentioned above (at least with the latest Chrome and Firefox as of this writing, though a solid round of browser testing is always a good idea).
However, if you want to "contain the hack" so to speak then you could try using a device/user-agent sniffing Javascript library (e.g. react-device-detect if you're using React) and conditionally render workarounds accordingly.
Alternatively, if you end up going with Approach 2 then you could use Safari-specific CSS targeting to render the pseudo-elements only in Safari.
Layout Fiddles
In the fiddles below, I have extrapolated on the OP's original example showing how different flex and grid layouts affect which first leaf descendants do and do not show highlighted text. I have added additional flex items and have nested the first element of each direct child of the flex container to show that tree depth appears to be irrelevant.
Layout
Fiddle
flex row
Fiddle
flex row (wrap)
Fiddle
flex column (wrap)
Fiddle
grid
Fiddle
So, I'm attempting to make my own website (Yeah, I finally sucked it up and started doing markup, sigh) - problem I'm having is I'm trying to center a button, and it's offset a little. Without the <center> it's all the way to the left.
Also tried :
style="align-items:center"
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<center><input class="button0" value="Install Redux" type="button" /></center>
</fieldset>
</div>
</div>
You just have to put <center> before your <div> and close it after </div>.
Like this:
<center>
<div id="form-container" style="align-items:center;">
<div>
<fieldset>
<input class="button0" value="Install Redux" type="button" />
</fieldset>
</div>
</div>
</center>
I've also made a CodePen and a JSFiddle for you.
Try text-align:center on the parent, or use left:0;top:0;position:relative;webkitTransform:translate3d(-50%,0%,0%); where parent doesn't have position:static (the default)
I would also recommend checking out Bootstrap because it has a nice grid layout that lets you define which 12ths of the page you want columns to lay in, simply by defining classes like .btn-default or .nav or in your case class="col-xs-12" inside that other column
They also have really nice styles for forms and input buttons etc. (see video on my example site below)
Try resizing your browser while looking at their examples. Pretty much, you define class="col-xs-12" if you want it to appear as 12/12 width of the row on extra small (mobile) and LARGER devices, and you can mix them class="col-xs-12 col-md-6" so it will split the row on larger (tablet) size devices. It's the number 1 repository on GitHub, and only takes about 30 minutes to read through the Grid Layout and search around for "Nav" and "Button" elements.
I recently made a quick site http://neaumusic.github.io, feel free to check it out, and good luck
Two ways:
1) Set margin-left: auto; AND margin-right: auto; to the containing div OR
2) Set display:flex; AND justify-content:center;to the parent container.
Google flex box for a little more information, its very useful for layout once you get the hang of it.
As stated in the comments, the center tag is no longer supported.
What about if you try #form-container { text-align: center; } ? It will center all children, including button.
I would definitely recommend using flexbox, the only issue being ie8/9 support.
It really makes layout so much easier and you don't have to create very specific, often arbitrary margins to get your stuff to align nicely, particularly vertical alignment.
Your alignment options are split between the container and the items. It does row and column layout too.
Here is a link I used to get me started.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I am newbie in Twitter Bootstrap. It is a very simple question.
Here is the image:
And here is my Code:
<div class="col-md-8 col-xs-6 col-sm-6 placeholders">
<p id="people-things" class="text-center">PEOPLE-THINGS RECOMENDATION</p>
</div>
Problem: I want to put the Recomendation text in one line other then going in next line.
Infos: I had tried every grid in but still couldn't sort it out.
You have to make smaller font-size on .people-things or add this CSS:
.people-things { white-space: nowrap; }
Which is making .people-things to show on one line.
The solution above works but bootstrap grid classes should be ideally used by itself and you should not need any custom styles on top of it.
Try rearranging your grid structure such that apply <col-sm-6> before <col-xs-6>. That will allow more space in the grid cell to fit the text. Also you might not need three levels of grid nesting. You could use: <col-md-8><col-sm-8> and see if that works.
I just started out using twitter bootstrap and so far I've had a nice experience.
I'm currently having some trouble with positioning some .well elements the way I'd like them to be. Basically, this is what I'd like to see them
But this is what I get
The second row is clearly overlapping the first one because the elements are floated and the row is not wrapped around the .well element. I tried to apply .clearfix class but sadly it did not fix this.
Here's the html I'm currently using
<div class="container">
<div class="row offset-top-large">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
<div class="row offset-top">
<div class="col-md-9">
<a href="#" class="well well-lg">
</a>
</div>
</div>
</div>
The .offset-top classes just add additional margins to the rows
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:20px;
}
I know that I can fix this on my own by manipulating the css, like, removing the floats, for example, but my question is - can I do this (get the desired output) without adding any additional CSS and possibly breaking the bootstrap functionality (resizing to smaller screens etc.).
Edit
Sorry, I had posted the code with the wrong well size class - I have corrected it now and here is a fiddle displaying my problem - http://www.bootply.com/127620
Thanks!
Based on the html and css you provided, this has nothing to do with floats. The problem is that you only have link elements in your rows, which by default are inline elements. Inline elements don't take up any space in their container elements. Try adding display:block or display:inline-block to the well elements.
The update to your question doesn't change a lot, you just need to increase the margin to account for the larger well size.
Try this:
.offset-top-large{
margin-top:100px;
}
.offset-top{
margin-top:50px;
}
Note: bantroth is also correct, adding display:block to your a tags is another solution.