இலவச மாற்றி
CSS Flexbox லேஅவுட் ஜெனரேட்டர்
நேரடி முன்னோட்டத்துடன் CSS ஃப்ளெக்ஸ்பாக்ஸ் தளவமைப்புகளை பார்வைக்கு உருவாக்கவும். ஃப்ளெக்ஸ்-திசையை சரிசெய்யவும், உள்ளடக்கத்தை நியாயப்படுத்தவும், உருப்படிகளை சீரமைக்கவும் மற்றும் பல - இலவசம் மற்றும் கிளையன்ட் பக்கமும்.
நேரடி முன்னோட்டம்
1
2
3
4
5
நெகிழ்வு-திசை
நெகிழ்வு-மடக்கு
நியாயப்படுத்த-உள்ளடக்கம்
align-பொருட்கள்
இடைவெளி (8px)
0px32px64px
CSS வெளியீடு
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
}
.item {
padding: 1rem 1.5rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
min-width: 60px;
text-align: center;
}