flex布局:justify-content


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        div#main{
            display: flex;
            justify-content:flex-start; 
            width: 300px;
            border: 1px solid #000;
            margin-top: 30px;
        }
        div#main div{
            width: 50px;
            height: 50px;
        }
    style>
head>
<body>
    <div>
        <div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" value="flex-start" checked='checked' /><label for="value_1">justify-content: flex-startlabel>div>
        <div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" value="flex-end" /><label for="value_2">justify-content: flex-endlabel>div>
        <div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" value="center" /><label for="value_3">justify-content: centerlabel>div>
        <div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" value="space-between" /><label for="value_4">justify-content: space-betweenlabel>div>
        <div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" value="space-around" /><label for="value_5">justify-content: space-aroundlabel>div>
        <div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" value="initial" /><label for="value_6">justify-content: initiallabel>div>
    div>
    <div id="main" style="">
        <div style="background-color:coral;">div>
        <div style="background-color:lightblue;">div>
        <div style="background-color:khaki;">div>
        <div style="background-color:pink;">div>
    div>

    <script>
        function click_position(obj){
            document.getElementById("main").style.justifyContent = obj.value;
        }
    script>
body>
html>

效果:
flex布局:justify-content_第1张图片

你可能感兴趣的:(flex布局:justify-content)