ଫ୍ଲେକ୍ସବକ୍ସ ଜେନେରେଟର |

ଫ୍ଲେକ୍ସ ଦିଗ, ଗୁଡ଼ାଇ, ଯଥାର୍ଥ, ଏବଂ ଆଲାଇନ୍ ସହିତ ପରୀକ୍ଷଣ | ଆଇଟମ୍ ଲେଆଉଟ୍ ଲାଇଭ୍ ଅପଡେଟ୍ ଦେଖନ୍ତୁ, ତାପରେ କଣ୍ଟେନର୍ CSS କପି କରନ୍ତୁ |

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

ଫ୍ଲେକ୍ସ ଦିଗ, ପରୀକ୍ଷଣ, ଯଥାର୍ଥତା ଏବଂ ଆଲାଇନ୍ ସହିତ ପରୀକ୍ଷଣ - ଲେଆଉଟ୍ ଅପଡେଟ୍ ଲାଇଭ୍ ଦେଖନ୍ତୁ |
ଆପଣଙ୍କ ବ୍ରାଉଜରରେ ଚାଲିଥାଏ |
ବ୍ୟବହାର କରିବାକୁ ମାଗଣା |

କିପରି ବ୍ୟବହାର କରିବେ |

ଫ୍ଲେକ୍ସ-ଡାଇରେକ୍ଟ୍ ଏବଂ ରାପ୍ ସେଟ୍ କରନ୍ତୁ |
ଯଥାର୍ଥ-ବିଷୟବସ୍ତୁ ଏବଂ ଆଲାଇନ୍-ଆଇଟମଗୁଡିକ ଆଡଜଷ୍ଟ୍ କରନ୍ତୁ |
ଫ୍ଲେକ୍ସବକ୍ସ CSS କପି କରନ୍ତୁ |

How this tool works

ଫ୍ଲେକ୍ସ-ଡାଇରେକ୍ଟ୍ ଏବଂ ରାପ୍ ସେଟ୍ କରନ୍ତୁ |
ଯଥାର୍ଥ-ବିଷୟବସ୍ତୁ ଏବଂ ଆଲାଇନ୍-ଆଇଟମଗୁଡିକ ଆଡଜଷ୍ଟ୍ କରନ୍ତୁ |
ଫ୍ଲେକ୍ସବକ୍ସ CSS କପି କରନ୍ତୁ |

Recommended settings

ପ୍ରଥମେ ଡିଫଲ୍ଟ ବିକଳ୍ପଗୁଡିକ ବ୍ୟବହାର କରନ୍ତୁ, ତାପରେ ଆବଶ୍ୟକ ହେଲେ ଆଡଜଷ୍ଟ କରନ୍ତୁ |

Supported formats

Text / on-page input

File size and limits

ଅତ୍ୟଧିକ ଜଟିଳ ମଲ୍ଟି-ଲେୟାର ପୂର୍ବାବଲୋକନ ପୁରୁଣା ଫୋନରେ ମନ୍ଥର ଅନୁଭବ କରିପାରନ୍ତି |

Privacy

ରଙ୍ଗ ଏବଂ CSS ଜେନେରେଟରଗୁଡ଼ିକ ସମ୍ପୁର୍ଣ୍ଣ ଭାବରେ ଆପଣଙ୍କ ବ୍ରାଉଜରରେ ଚାଲିଥାଏ | ପୂର୍ବାବଲୋକନ ଏବଂ ରୂପାନ୍ତରଗୁଡ଼ିକ କେବେବି ଆପଣଙ୍କର ଶ yles ଳୀ ଅପଲୋଡ୍ କରେ ନାହିଁ |

Common use cases

ଯେତେବେଳେ ଆପଣ ଆବଶ୍ୟକ କରନ୍ତି ଫ୍ଲେକ୍ସବକ୍ସ ଜେନେରେଟର ବ୍ୟବହାର କରନ୍ତୁ: ଫ୍ଲେକ୍ସ ଦିଗ୍ ସହିତ ପରୀକ୍ଷଣ, ଗୁଡ଼ାଇ, ଯଥାର୍ଥ, ଏବଂ ଆଲାଇନ୍ କରନ୍ତୁ - ଲେଆଉଟ୍ ଅପଡେଟ୍ ଲାଇଭ୍ ଦେଖନ୍ତୁ |

Troubleshooting

ପେଷ୍ଟ ପରେ ପୂର୍ବାବଲୋକନ ଭିନ୍ନ ଦେଖାଯାଏ |

ଆପଣଙ୍କ ପୃଷ୍ଠାରେ ପ୍ରତିଯୋଗୀ CSS ଯାଞ୍ଚ କରନ୍ତୁ (ପୁନ ets ସେଟ୍, ଉତ୍ତରାଧିକାରୀ ରଙ୍ଗ) | ସୃଷ୍ଟି ହୋଇଥିବା ନିୟମକୁ ପ୍ରଥମେ ଏକ ପୃଥକ ଶ yles ଳୀରେ କପି କରନ୍ତୁ |

FAQ

ଏହା ମୋର CSS ଅପଲୋଡ୍ କରେ କି?

ନା। ଜେନେରେଟର ଏବଂ କନଭର୍ଟରଗୁଡ଼ିକ ଲାଇଭ ପ୍ରିଭ୍ୟୁ ସହିତ ଆପଣଙ୍କ ବ୍ରାଉଜରରେ ଚାଲିଥାଏ |

ମୋର ଏକ ଖାତା ଦରକାର କି?

ନା। ଟୁଲ୍ ଖୋଲ, ନିୟନ୍ତ୍ରଣକୁ ଟ୍ୱିକ୍ କର ଏବଂ CSS କୁ କପି କର |