List items in columns from top to bottom instead of left to right
Use CSS3 multi-column layout for this. Browser support is questionable so please use vendor prefixes.
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
width: 100%;
}
/* default */
ul {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
/* < 800px */
@media screen and (max-width: 799px) {
ul {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
/* < 400px */
@media screen and (max-width: 399px) {
ul {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
<ul>
<li>Albania</li>
<li>Andorra</li>
<li>Armenia</li>
<li>Austria</li>
<li>Azerbaijan</li>
<li>Belarus</li>
<li>Belgium</li>
<li>Bosnia and Herzegovina</li>
<li>Bulgaria</li>
<li>Croatia</li>
<li>Cyprus</li>
<li>Czech Republic</li>
<li>Denmark</li>
<li>Estonia</li>
<li>Finland</li>
<li>France</li>
<li>Georgia</li>
<li>Germany</li>
<li>Greece</li>
</ul>
CSS multi-column layout of list items doesn't align properly in Chrome
You need each item in the column to be displayed as "inline-block". That will solve your problem without needing to use jQuery.
Additionally, each element can be specified to have width: 100%
in order to get the them to use the full width of the rows.
Here is a working example:
$(document).ready(function() {
for( var i = 0; i < 24; i++ ) {
$("ul.newslist").append("<li><a href='#'>Item</a></li>");
}
$("ul.newslist > li").click(function() {
$(this).remove();
})
});
ul.newslist {
columns: 5;
background-color: #ccc;
padding: 16px 0;
list-style: none;
}
ul.newslist > li {
display: inline-block;
width: 100%;
border-top: 1px solid #000;
}
ul.newslist > li > a {
display: block;
padding: 4px;
background-color: #f6b;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="newslist"></ul>
Can I sort grid items from top to bottom while still wrapping to the next column?
I think the only way to do this is to consider JS and dynamically adjust the number of rows.
Here is a simplified example where you will need a more complete code if you will have gap, padding, etc
var minv = 200;
var grid = document.querySelector('.grid');
var nb = document.querySelectorAll('.grid li').length;
var nb_row = Math.ceil(nb/Math.floor(grid.offsetWidth/200));
/* grid.offsetWidth/200 = X will give the number of columns
nb/X will give the number of rows
We use floor with the first as we won't have overflow but a wrap (so 3.2 should be 3)
We use ceil with the second one as we may have the last row with fewer elements (so 3.2 should be 4)
*/
grid.style.gridTemplateRows="repeat("+nb_row+",auto)";
window.addEventListener('resize', function(event){
nb_row = Math.ceil(nb/Math.floor(grid.offsetWidth/200));
grid.style.gridTemplateRows="repeat("+nb_row+",auto)";
});
.grid {
display: grid;
grid-auto-columns: minmax(200px, 1fr);
grid-auto-flow: column;
list-style: none;
padding:0;
}
<ul class="grid">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
</ul>
Flutter: Trying to bottom-center an item in a Column, but it keeps left-aligning
Align is the way to go if you have only one child
.
If you have more, consider doing something like this:
return new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
// Your elements here
],
);
Flutter align two items on extremes - one on the left and one on the right
Use a single Row
instead, with mainAxisAlignment: MainAxisAlignment.spaceBetween
.
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
new Text("left"),
new Text("right")
]
);
Or you can use Expanded
new Row(
children: [
new Text("left"),
new Expanded(
child: settingsRow,
),
],
);
CSS columns with left-right flow
The multi-column specification offers no property to change the distribution of elements among the columns: http://www.w3.org/TR/css3-multicol/. Such a property seems to go against what the module was designed for (recreating how newspaper or magazine articles are laid out).
None of the other pure CSS solutions will allow you to achieve the effect you are looking for.
Center one and right/left align other flexbox element
Below are five options for achieving this layout:
- CSS Positioning
- Flexbox with Invisible DOM Element
- Flexbox with Invisible Pseudo-Element
- Flexbox with
flex: 1
- CSS Grid Layout
Method #1: CSS Positioning Properties
Apply position: relative
to the flex container.
Apply position: absolute
to item D.
Now this item is absolutely positioned within the flex container.
More specifically, item D is removed from the document flow but stays within the bounds of the nearest positioned ancestor.
Use the CSS offset properties top
and right
to move this element into position.
li:last-child {
position: absolute;
top: 0;
right: 0;
background: #ddd;
}
ul {
position: relative;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
li {
display: flex;
margin: 1px;
padding: 5px;
background: #aaa;
}
p {
text-align: center;
margin-top: 0;
}
span {
background-color: aqua;
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<p><span>true center</span></p>
Related Topics
Possible to Style the CSS3 Resize Function
Html5 Video Not Working in Ie 11
Internet Explorer 11 Word Wrap Is Not Working
Is There a Disadvantage of Using 'Display:Table-Cell'On Divs
Chrome Could Play HTML5 Mp4 Video But HTML5Test Said Chrome Did Not Support Mp4 Video Codec
Restoring the Value of a Input Type=File After Failed Validation
Can Xhtml and HTML Class Attributes Value Start with a Number
How to Cut a Circular Part from an Image
How to Implement Curve Background in CSS
How to Stop the Browser from Url-Encoding Form Values on Get
Height of Flex Container Not Working Properly in Safari
Bootstrap Grid, Do I Need a Container
How to Use the CSS Pseudo-Element :Before{ Content: '' } to Affect an <Option> Element
Can Overflow:Hidden Affect Layout
How to Replace Color of Png Image Using CSS
How Remove Horizontal Scroll Bar for Iframe on Google Chrome