.panel
fieldset
legend justify-content
select(name='jc')
each val in ['stretch', 'start', 'end', 'flex-start', 'flex-end', 'left', 'right', 'center', 'space-between', 'space-around', 'space-evenly']
option(value=''+val)
=val
fieldset
legend align-content
select(name='ac')
each val in ['stretch', 'start', 'end', 'flex-start', 'flex-end', 'left', 'right', 'center', 'space-between', 'space-around', 'space-evenly']
option(value=''+val)
=val
fieldset
legend justify-items
select(name='ji')
each val in ['stretch', 'start', 'end', 'self-start', 'self-end', 'flex-start', 'flex-end', 'left', 'right', 'center', 'first baseline', 'last baseline']
option(value=''+val)
=val
fieldset
legend align-items
select(name='ai')
each val in ['stretch', 'start', 'end', 'self-start', 'self-end', 'flex-start', 'flex-end', 'left', 'right', 'center', 'first baseline', 'last baseline']
option(value=''+val)
=val
h2 Флекс-контейнер
.container#flex
each val in [1, 2, 3, 4, 5, 6]
.item
fieldset
legend justify-self
select(name='js')
each val in ['auto', 'stretch', 'start', 'end', 'self-start', 'self-end', 'flex-start', 'flex-end', 'left', 'right', 'center', 'first baseline', 'last baseline']
option(value=''+val)
=val
fieldset
legend align-self
select(name='as')
each val in ['auto', 'stretch', 'start', 'end', 'self-start', 'self-end', 'flex-start', 'flex-end', 'left', 'right', 'center', 'first baseline', 'last baseline']
option(value=''+val)
=val
h2 Грид-контейнер (6 ячеек 150×170px)
.container#grid
each val in [1, 2, 3, 4, 5,6]
.item
fieldset
legend justify-self
select(name='js')
each val in ['auto', 'stretch', 'start', 'end', 'self-start', 'self-end', 'flex-start', 'flex-end', 'left', 'right', 'center', 'first baseline', 'last baseline']
option(value=''+val)
=val
fieldset
legend align-self
select(name='as')
each val in ['auto', 'stretch', 'start', 'end', 'self-start', 'self-end', 'flex-start', 'flex-end', 'left', 'right', 'center', 'first baseline', 'last baseline']
option(value=''+val)
=val
.helper
.container {
width: 500px;
height: 380px;
border: 1px solid green;
}
#grid {
display: grid;
grid: repeat(2, 170px) / repeat(3, 150px);
}
#flex {
display: flex;
flex-flow: row wrap;
}
.item {
background: rgba(255,160,160,.5);
border: 1px solid rgba(255,0,0,.5);
}
#flex .item:nth-child(5), #grid .item:nth-child(9) {
direction: rtl;
background: rgba(160,255,160,.5);
border: 1px solid rgba(0,255,0,.5);
}
.tb {
writing-mode: tb-rl;
}
.helper {
background: #ccc;
justify-self: stretch;
align-self: stretch;
border: 1px solid #888;
z-index: -1;
}
@for $i from 0 through 1 {
@for $j from 0 through 2 {
.item:nth-child(#{($i * 3 + $j) * 2 + 1}), .helper:nth-child(#{($i * 3 + $j) * 2 + 2}) {
grid-row: #{$i + 1};
grid-column: #{$j + 1};
}
}
}
.panel {
display: flex;
margin-bottom: 1em;
justify-content: space-between;
}
ul {
list-style: none;
padding: 0;
}
body {
width: 550px;
}
const properties = {
jc: 'justify-content',
ac: 'align-content',
ji: 'justify-items',
ai: 'align-items',
js: 'justify-self',
as: 'align-self'
}
for (let key in properties) {
let controls = document.getElementsByName(key);
controls.forEach(function(item) {
if (key === 'as' || key === 'js' ) {
item.addEventListener('change', event=>{
console.log(event.target.parentNode.parentNode)
event.target.parentNode.parentNode.style.setProperty(properties[key],event.target.value);
});
}
else {
item.addEventListener('change', event=>{
document.getElementById('grid').style.setProperty(properties[key],event.target.value);
document.getElementById('flex').style.setProperty(properties[key],event.target.value);
})
}
});
}
Also see: Tab Triggers